What triggers a render
A React component re renders when its state changes, its parent re renders, or a context it consumes changes. Many of these renders produce the exact same output and waste work.
- A render computes output even if the DOM ends up identical
- The cost grows when subtrees are large or rendering is expensive
- The goal is to cut renders that cannot change the screen
Common fixes
- Lift content as children so a stateful wrapper does not re render the static parts
- Wrap pure children in memo with stable props
- Keep callbacks and objects stable with useCallback and useMemo
- Move fast changing state down into a small subtree
Measuring first
Do not guess. Use the Profiler to see which components render and why, then apply a fix only where it pays off.
Render causes
Key idea
Renders come from state, parent renders, and context changes; cut the wasted ones by memoizing pure children, stabilizing props, passing static content as children, and pushing volatile state down.