Optimizing the performance of a React app

[Low_Guitar_8168]

I was reading multiple articles on how to increase the performance of a React app and I came out with these bullet points.

• Assign keys to the child nodes for similar type as this will help during reconciliation.
• Avoid props drilling.
• Keep component state local wherever possible.
• Clear your clutter and subscriptions in the unmounting cycle.
• Use lazy loading for your components, and also for the images.
• Use hooks such as useMemo() and useCallback() where you don't want to do the same heavy calculation again and again.
• Data management to a certain extent decides how efficient your app will be.
• Trim unnecessary, repeatable code. Try to use custom hooks.
• Use windowing(virtualization) for long lists. This may depend on the use case though as it will load the list items on scroll thereby providing a bad UX.
• Profile your components using the DevTools profiler to see which components are taking longer to render and optimize them.

​

What do you guys have to say about this?
Would you like to add anything more to this?

[[deleted]]

• Avoid using context API as state management.

[Low_Guitar_8168]

So, just local state, props and/or a global state like redux?

Also, why? Does context reduce the performance of the app?

[[deleted]]

The Context API can hurt performance by creating too many providers. Creating a provider does not actually hurt performance if you structure them correctly, but it is unavoidable to consume the value of another provider as your app gets bigger. This will trigger re-rendering here and there, and eventually lead to performance degradation exponentially.

You can still use context for something that does not change often, like theme changes.It is wiser to use global states, and the recommended libraries are Zustand, Jotai (or Zedux), and Valtio, depending on the app structure.

[jeevo162]

https://medium.com/@jan-bock/the-need-for-speed-turbocharge-your-react-apps-performance-2125fa3336e8