Why does a React component re-render and how do you prevent unnecessary re-renders?
Quick answer
A component re-renders when its state changes, its parent re-renders, or a context it consumes changes; you prevent wasted renders by moving state down, using React.memo, and keeping props referentially stable.
By default, when a component renders, all of its children render too, even if their props did not change. React then compares the output and only updates the DOM where something is different, so a re-render is not necessarily a DOM update, but the work of calling your component still costs time.
Start by fixing the structure: keep state close to where it is used, and split a component so a frequently changing part (such as an input) does not drag a heavy sibling along. Passing children as props also helps, because the same element object does not re-render. If that is not enough, wrap pure components in React.memo, stabilise object and function props with useMemo and useCallback, and split large contexts. Use the React DevTools Profiler to confirm what actually rendered and why before optimising.
Key points
- Triggers: own state change, parent render, context change
- Move state down and compose with children first
- React.memo only helps if props are stable