Checklist: How to make your React app faster ⚛️: ✅ Keep state as local as...
Checklist: How to make your React app faster ⚛️:
✅ Keep state as local as possible. Start by declaring state in the component that uses it. Lift as needed.
✅ Store data that doesn't need to render in refs
✅ Minimize context usage
1/x...
✅ Avoid putting data that changes a lot in context
✅ Separate contexts based on when they change
✅ Place context providers as low as possible
✅ Memoize expensive operations via useMemo
✅ Avoid needless renders via React.memo
2/x...
✅ Put content that renders frequently in a separate component to minimize the amount that's rendered
✅ Split complex controlled forms into separate components
✅ Consider uncontrolled components for large, expensive forms
3/x...
✅ Consider wrapping functions passed to children in useCallback to avoid needless renders in children
✅ Consider useReducer over useState so you can pass dispatch down instead of callbacks (avoids needless renders)
✅ Split the bundle via React.lazy
4/x...
✅ Consider prefetching lazy loaded components that are highly likely to be used
✅ Streamline HTTP requests - fetch only necessary data
✅ Avoid named imports when importing third party libraries / components (doing so can bloat the bundle by importing the entire lib)
5/x...
✅ Cache HTTP requests via react-query/swr/Apollo/etc.
✅ Prefer native HTML inputs over fancy components that simulate native behaviors
Okay, that's a long enough for a Twitter thread. 😀
The full list of 42+ ways is here on my reactjsconsulting repo: https://github.com/coryhouse/reactjsconsulting/issues/77
Okay, I've seen snarky comments that this list just means React is poorly designed.
I disagree.
1. I rarely worry about performance in React. Why? Because typically the most ergonomic thing is plenty fast.
2. Much of this advice applies to any framework.