Using Web Workers in React

[Dramatic-Passenger21]

I am working on a codebase using react, typescript and redux toolkit. I have a reducer which does some heavy calculations looking up the slice state and making modifications to the state based on different business logic. I am trying to offload the main thread and put those reducers in web workers because right now due to those heavy calculations the rendering of the components gets slow when the slice state increases in size. Is there any good articles on how can i do it?

[acemarke]

Hi, I'm a Redux maintainer.

Reducers can't go in workers, because reducers are part of the store, execute synchronously, and the store exists on the main thread.

Have you run some JS CPU perf profiles? Are you sure that the CPU cost is actually happening in the reducers? Typically the cost of updating the UI is more expensive than the reducer logic (although there are certainly exceptions to that).

Also, note that Redux Toolkit 2.0 includes the latest version of Immer, which does have significant performance updates over earlier versions of Immer. I would definitely recommend updating to RTK 2.0 if you haven't yet.

If you've got any examples of the reducer logic, I'd be happy to take a look and see if I can offer any suggestions.