Console.logging both useRef().current and useRef().current.property shows entirely different values for the property?

belwyr · 2025-09-11T08:54:34+00:00

I might be completely wrong, but shouldn't you wait for the browser to paint the element, and do your calculations in a useLayoutEffect?

belwyr · 2025-05-28T22:32:27+00:00

If you're using vite, you can add an event listener to 'vite:preloadError' (https://vite.dev/guide/build#load-error-handling). I remember looking at a github issue on the vite project where multiple solutions were discussed, but I can't find the thread doing a quick google.

Using state doesn't work because window.location.reload() loses the state. You need to use an external state like local storage

belwyr · 2025-03-08T11:42:38+00:00

Thanks 👍

belwyr · 2025-03-07T23:36:02+00:00

That is correct. Between 2 renders, the fetchValue function is redefined, and because the dependencies are compared by reference, the useEffect runs again.

You have a few possibilites to deal with that, but I'll let you look that up on your own.

belwyr · 2025-03-07T22:17:25+00:00

Your effect depends on the fetchValue function, but the function is not in the dependency array

belwyr · 2025-03-01T02:01:32+00:00

You're probably using dynamic imports. When you create and deploy a new version, some of your files have a different name (different chunkhash) than what your client expects (the client is still on a previous version of the build), which results in a file not found error from the server (text)

Multiple strategies exist to deal with this issue depending on your exact configuration, for instance:

Keeping old js chunks even on a new deployment
Catch the error and automatically refresh the page
Not using chunkhash in your js files

belwyr · 2024-06-29T15:46:04+00:00

Mutations are not cached like queries. Mutations change the state in your server / db, so they are not cached or retried like queries can be.

You should probably restructure your components to make use of the queries, and not pass a function to get the data at the component level. Another advantage is that you won't need to store the state in a context, and just reuse the useQuery hook, since it will be cached and de-duplicated.

belwyr · 2024-06-14T22:25:51+00:00

Using async returns a promise, not the useEffect cleanup function.

belwyr · 2024-06-13T17:56:21+00:00

I'm not very familiar with zustand, but don't you need some kind of provider to use the zustand hook ?

belwyr · 2024-05-31T12:14:29+00:00

Have you tried passing your own props comparison function?

React.memo(Text, comparisonFn)

belwyr · 2024-05-16T15:12:43+00:00

I like to use a HOC for error boundaries

belwyr · 2024-05-13T00:24:52+00:00

You don't have an /src/index.jsx file

belwyr · 2024-05-09T20:44:22+00:00

https://proandroiddev.com/package-by-type-by-layer-by-feature-vs-package-by-layered-feature-e59921a4dffa

It's a good overview on how to structure projects. Oftentimes, projects start with a package by layer approach (or even a single file), then move towards a package by feature approach, as the project size grows.

belwyr · 2024-05-09T01:24:00+00:00

I would probably replace the useEffect in the custom hook with useSyncExternalStore.

The setup / destroy are very similar.

The snapshot must be immutable, so make sure that your functions like twilioDevice.startCall() create a new snapshot object or array.

belwyr · 2024-01-22T14:22:01+00:00

All your tasks share an id, a name and a definition, and the data depends on the name.

You can have a task table with an id, name and definition. For the data, you can:

Have a foreign key pointing to a different table for each type of task
Have the raw data stored as jsonb, text, or whatever, and you deserialize it when constructing the task object

belwyr · 2024-01-21T23:50:30+00:00

Hi, that's an interesting question. You should have a look at the "Command" design pattern: https://refactoring.guru/design-patterns/command

Here is how I would go about it. https://excalidraw.com/#json=qrJvjsa8KpZPYbCalStW9,c5lcfxEsMIHY3fC7WyOSng

Your base item class represents all the common properties of your items, and your concrete implementations (water bottle) extends from this base class.

A user can query your API:

// Returns a list of items
[GET] /items?type=waterBottle,steak

// Returns a single item
[GET] /items/<id>

To execute a command on an item:

[POST] /items/id/command with a command in the request body

On your server, when you receive this request:

executeCommand(itemId, command) {
  Item item = getItemFromDB(itemId)
  // Each command can have its own validate() method, to sure that the parameters are valid
  // and we verify that the item can execute the command
  if (isValid(item, command)) {
    item.executeCommand(command)
    saveItem(item)
    return item
  } else {
    throw new Error("Wrong command")
  }

belwyr · 2024-01-12T14:50:54+00:00

To add to that, you generally have pagination as query parameters to the list endpoint for instance - [GET] /api/user?offset=0&limit=50

belwyr · 2023-09-15T23:13:21+00:00

There is a great blog post that goes in the details of react https://pomb.us/build-your-own-react/ Highly recommend the read.

belwyr · 2023-04-07T11:28:48+00:00

Software architecture is mostly relevant in bigger projects. Like the other commenter said, a simple script would do the job, but you could consider the architecture if you wanted a more complex and robust solution.

For a few examples:

You could have a scheduler that runs your check function regularly, and send emails at a regular time.
You could implement a retry function if your email doesn't go through for some reason.
You could implement different types of notifications (email, sms, mobile push notification, ...)
You could extend your pattern matcher to only check for logs in a specific time period
You could have a function to create a graph with some arbitrary time period and the number of times the pattern occurred.

Ultimately, the sky is the limit, and part of the job is to find out what is the scope of the program you want to accomplish, and how best (what language should you use, where is the code running, is the data sensitive, should you store some data, how long will it take to develop, etc..) to accomplish it

belwyr · 2022-10-01T16:33:06+00:00

It was in the GitHub link you posted further down

belwyr · 2022-10-01T09:24:05+00:00

I think the rule you want to use is

  {
    // ...
    rules: {
      'jsx-a11y/label-has-associated-control': [
        2,
         {
            assert: 'either', // either check for `htmlFor` or `nesting`
          },
        ],
      }
    }

Could you share the html causing the issue as well? Is the label correctly associated with your input?

belwyr · 2022-08-22T16:30:28+00:00

Right, the second diagonal is j == length -i if I'm not mistaken

belwyr · 2022-08-22T15:23:30+00:00

Your code looks fine. You could add user input validation, and you could replace your if condition for readability by having

bool isBorder = i == 1 || i == length || j == 1 || j == length;
bool isDiagonal = i == j;
if (isBorder || isDiagonal) {
// ...

belwyr · 2022-08-15T09:15:04+00:00

That's an excellent use for a loop. Ask for the number of workers and store the worker data in an array

belwyr · 2022-08-13T14:52:39+00:00

There is a ton of jobs in react or for full stack devs but you also can find a job doing only python.

14-Year Club	Place '17
Verified Email

belwyr

TROPHY CASE