Thread by @housecor

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: github.com/coryhouse/reac…

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.