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.