By default, React does performance optimization out of the box. So when do we have to do performance optimization?
Some rules for performance optimization:

1. Find the area where it causing performance bottleneck.

2. Measure before and after Optimization.

3. Check whether performance issues persist in production mode.

4. Sometimes doing nothing is better than doing something.

5. Must have a performance budget.

6. Must know what causes web slowness whether front end or back end.

7. Before optimizing react performance, optimize other issues that are causing performance issues like Image loading, font loading, Js loading etc.

Some of the areas we can consider in react we can think of optimization.

1. To avoid unnecessary re-rendering of components - Identify which nested components causing re- rendering of other components in the tree.

2. Identify what chunk of JS files is required to render components avoid to sending all all JS files in one bundle.

3. Use react built-in features to optimize performance like performance hooks - useMemo, useCallback , useTransition, useDeferredValue and for code splitting we can use dynamic import with lazy function, Suspense api , context api.

4. Use a Build tool like Webpack or any other tools.

Happy Learning 🙂