Here's a quick reference to debug and fix common react performance issues
- Production mode: Make sure deployed app is a production build, NOT a development build.
- Keys: make sure every component mapped from an array has a unique and stable key
- Check component hierarchy or state: first try to solve a problem by changing component hierarchy or state. A lot of problems can be solved by correcting component hierarchy or state organization.
- Memoization: memoization is a solid strategy if the cost of checking is less than the time you save rendering. Only memoize if time saved is more than cost of memoized operation.
- Suspense API: use the Suspense API to progressively load your app
- useTransition hook: use the useTransition hook to fix nasty performance bugs