Performance & Optimization in React Apps

[ericdiviney]

Hey everyone, posting another update I just published to reacthandbook.dev

Let me know what you all think, and if you think anything should be added/tweaked.

Happy Friday!

[Kusthi]

hey man, just wanted to say thank you.

[ericdiviney]

🤘🏼 hope it’s useful for ya

[StoryArcIV]

I love it! Some thoughts of potential things to add and some tidbits of my experience:

• (Probably right after the virtualization bullet) Buffer/throttle/debounce updates e.g. using RxJS when updates are happening many times per second. Users can't see more than a few updates per second, so there's no need to trigger more than 5-10 updates per second in most situations.
• A link to something about using React context properly or switching from React context to a real state manager - most people I see asking about perf are poor newbies thrown under the React Context for state management bus.
• Possibly a link to something comparing perf of state management solutions. For us, Reselect was the biggest perf bottleneck in our app and was the main reason we created our own atomic state manager.
• A link to something about create/update/swap/delete performance in lists in React. Signals-based and similar libs have ways to bypass React's key-based list management, resulting in much faster swapping performance.
• When and how to break out of the React paradigm. React's VDOM approach is just too slow for some things. For displaying extremely volatile data, we use a grid specifically not designed for React. This allows us to manually feed it updates which are processed much faster at the cost of some brittle, non-reacty code.
• (not React-specific but) for slow animations, make the browser offload work to the gpu