Rendering in React

When Does React Re-render?

A component re-renders when its state changes, when its parent re-renders (unless memoized), or when context it consumes changes. Re-rendering means React calls your function again — it does not always mean the DOM changes.

React 18 batches multiple state updates in event handlers, promises, and timeouts into a single render pass when possible, reducing unnecessary work and flicker.

function App() {
  const [a, setA] = useState(0);
  const [b, setB] = useState(0);

  const handleClick = () => {
    setA(a + 1);
    setB(b + 1); // batched — one re-render in React 18+
  };

  return <button onClick={handleClick}>{a + b}</button>;
}

Both setters in the same event handler typically produce one combined re-render.

Render Phase vs Commit Phase

Render phase   →  Call components, build virtual DOM, diff
Commit phase   →  Apply DOM changes, run layout effects
Passive effects → useEffect runs after paint

• During render, components must be pure — no side effects or DOM mutations.
• React compares the new element tree to the previous one (reconciliation).
• Only changed nodes are updated in the real DOM during commit.
• useEffect runs after the browser paints the updated UI.

Rendering Triggers

What causes a component to re-render.

Keep Render Functions Pure

Render functions should return the same JSX for the same props and state, with no network calls, subscriptions, or direct DOM manipulation. Side effects belong in event handlers or useEffect.

• Do not mutate props, state, or external variables during render.
• Do not call setState during render (causes infinite loops).
• Fetch data in effects or data libraries, not during render.
• Pure renders enable concurrent features and predictable debugging.

React Strict Mode and Double Rendering

In development, <StrictMode> intentionally double-invokes render and certain effects to surface impure code and missing cleanup. This does not happen in production builds.

Common Mistakes

• Assuming every re-render updates the DOM — React may bail out if output is unchanged.
• Performing side effects directly in the component body.
• Calling setState during render.
• Confusing React 18 automatic batching with debouncing.

Key Takeaways

• Re-renders occur when state, props, or context change.
• React diffs virtual trees and applies minimal DOM updates.
• React 18 batches updates for fewer renders.
• Keep render logic pure; put side effects elsewhere.