What Triggers Renders in React
A clear and practical guide to understanding what causes components to render in React and how to keep rendering predictable and efficient.
What Triggers Renders in React
Understanding what causes React components to render is essential for writing performant and predictable applications. Many performance issues come from unnecessary renders caused by unstable props, frequent updates, or misplaced state. This guide explains exactly what triggers renders in React, how the rendering model works, and how to keep your components efficient.
1. What Actually Triggers a Render
React renders a component when any of the following occur:
1. State changes
Any call to setState (or a state setter from useState, useReducer, etc.) schedules a render.
2. Parent re renders
If a parent renders, all children will render too unless they are memoized.
3. Props change
React checks identity and shallow equality. A new object or function reference counts as a change.
4. Context value changes
When a Context provider’s value updates, every consuming child re renders.
These are the only render triggers.
2. Identity versus Value Changes
React compares props by identity, not deep value. Objects, arrays, and functions are unstable by default.
Bad:
<Child config={{ dark: true }} />Good:
const config = useMemo(() => ({ dark: true }), []);
<Child config={config} />3. State Placement and Render Frequency
Placing state too high in the tree causes wide render cascades. Localize it when possible.
4. Props That Cause Unnecessary Re Renders
Inline values cause identity changes and force children to re render.
Bad:
<Child items={[1, 2, 3]} />Good:
const items = useMemo(() => [1, 2, 3], []);
<Child items={items} />5. Context and Render Cascading
Updating a context provider re renders every consumer below it.
Solutions:
- Split contexts based on domain
- Memoize context values
- Avoid storing frequently changing state in context
6. Parent Re Renders and Component Boundaries
Children re render when the parent renders. To prevent unnecessary work, wrap stable children in memo.
const Child = memo(function Child() {
return <div>Child</div>;
});7. Effects Do Not Trigger Renders
useEffect and useLayoutEffect run after render. They do not cause renders unless the effect updates state.
8. useRef Does Not Cause Renders
A ref update does not produce a render because refs hold mutable values outside React’s render cycle.
9. Render Phase versus Commit Phase
Render Phase: React calculates what the UI should look like.
Commit Phase: React updates the DOM.
Final Thoughts
Renders occur for predictable reasons: state updates, prop identity changes, context updates, and parent renders. Understanding these rules makes it easier to structure components, reduce wasted renders, and keep applications fast and stable.