Cannot update component while rendering React Fix: Tutorial, Examples, FAQs & Interview Tips

Cannot update component while rendering React Fix

This warning appears when rendering is no longer pure. A component should calculate JSX during render, not trigger updates to itself, its parent, or another component while that calculation is happening.

The fix is usually to move the update into an event handler for user actions or into useEffect for updates that must happen after React commits the render.

What is "Cannot update a component while rendering a different component"?

This React warning occurs when a component triggers a state update in another component during the render phase. React's rendering must be a pure, side-effect-free process. Calling setState or a state updater function during rendering "" even indirectly through a child component "" violates this rule and can cause infinite render loops or inconsistent UI states.

Common Causes

Calling a parent's setState directly inside a child component's render body
Invoking a state setter function during the render phase instead of in an event handler
Missing or incorrect dependency array in useEffect causing state updates during render
Passing an immediately-invoked function as an event handler instead of a function reference
Calling state updates inside render logic conditionals

Quick Fix (TL;DR)

Quick Solution

// ❌ Problem "" setState called during render
function Child({ onUpdate }) {
  onUpdate("new value"); // Called during render!
  return <div>Child</div>;
}

// ✅ Solution "" move to useEffect
function Child({ onUpdate }) {
  useEffect(() => {
    onUpdate("new value"); // Called after render
  }, [onUpdate]);
  return <div>Child</div>;
}

Common Scenarios & Solutions

Calling a state setter directly in the component body (outside of event handlers or effects) triggers a state update during the render phase, causing React to warn and potentially loop.

When a child component calls a parent's state setter (passed as a prop) directly in its render body, it updates the parent's state while the parent is still rendering, causing this warning.

A useEffect without a dependency array runs after every render. If it updates state, it triggers another render, which runs the effect again "" creating an infinite loop that also triggers this warning.

Passing onClick={setState(value)} instead of onClick={() => setState(value)} immediately calls the function during render instead of waiting for the click event.

Problem

function App() {
  const [count, setCount] = useState(0);

  // ❌ Called during render "" causes warning
  setCount(count + 1);

  return <div>{count}</div>;
}

Solution

function App() {
  const [count, setCount] = useState(0);

  // ✅ State updates in event handlers
  const handleClick = () => setCount(c => c + 1);

  return <button onClick={handleClick}>{count}</button>;
}

Problem

function Parent() {
  const [title, setTitle] = useState("");
  return <Child setTitle={setTitle} />;
}

function Child({ setTitle }) {
  setTitle("Hello from Child"); // ❌ Called during render!
  return <div>Child</div>;
}

Solution

function Child({ setTitle }) {
  // ✅ Use useEffect to update parent after render
  useEffect(() => {
    setTitle("Hello from Child");
  }, []); // Empty deps "" runs once after mount

  return <div>Child</div>;
}

Problem

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData().then(result => setData(result));
    // ❌ No dependency array "" runs after every render!
  });

  return <div>{data}</div>;
}

Solution

function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData().then(result => setData(result));
  }, []); // ✅ Empty array "" runs only once after mount

  return <div>{data}</div>;
}

Problem

function App() {
  const [active, setActive] = useState(false);

  return (
    // ❌ setActive(true) is called immediately during render!
    <button onClick={setActive(true)}>Activate</button>
  );
}

Solution

function App() {
  const [active, setActive] = useState(false);

  return (
    // ✅ Arrow function wraps the call "" only runs on click
    <button onClick={() => setActive(true)}>Activate</button>
  );
}

Best Practices

Keep render pure - The render function (component body) should only compute and return JSX. No side effects, no state updates.
Use useEffect for side effects - Any state update triggered by mounting, data fetching, or subscriptions belongs in useEffect.
Always add dependency arrays to useEffect - An empty [] runs once; list specific deps to run when they change.
Use function references in event handlers - Pass onClick={handleClick} not onClick={handleClick()}.
Use React DevTools - The Profiler tab shows which components are re-rendering and why, helping diagnose update loops.
Lift state up carefully - When sharing state between components, lift it to the nearest common ancestor and pass setters as props "" but only call them in effects or handlers.
Enable React Strict Mode - Strict Mode double-invokes renders in development to help surface these issues early.

Related Errors

Why Render Must Stay Pure

React may call render more than once, especially in development Strict Mode. If rendering also changes state, the same render calculation can trigger another render, which can trigger another update, making the UI unpredictable.

A pure render reads props and state and returns JSX. Side effects such as setState, navigation, subscriptions, storage writes, and analytics should happen after render or in response to events.

Do not call setState directly in the component body.
Do not update parent state while a child is rendering.
Use event handlers for click, submit, and change updates.
Use useEffect for synchronization after render.

Parent and Child Update Pattern

This warning often appears when a child component checks a prop and immediately calls a parent setter during render. The child render is still in progress, but the parent update asks React to start another render path.

Move that parent update into useEffect with a precise dependency array. If the update is caused by a user action, move it into the event handler instead.

Mount-time synchronization belongs in useEffect.
User-triggered updates belong in event handlers.
Derived values should often be calculated instead of stored.
Avoid setting state only to mirror props unless there is a real need.

Wrong: Updating Parent During Child Render

function Child({ count, setStatus }) {
  if (count > 10) {
    setStatus("limit reached"); // Wrong during render
  }

  return <p>{count}</p>;
}

Correct: Move Update to useEffect

function Child({ count, setStatus }) {
  useEffect(() => {
    if (count > 10) {
      setStatus("limit reached");
    }
  }, [count, setStatus]);

  return <p>{count}</p>;
}

Key Takeaways

Search the component body for setState or parent setter calls.
Move user-triggered updates into event handlers.
Move render-driven synchronization into useEffect.
Check child components that call parent callbacks immediately.
Remove unnecessary mirrored state when a derived value is enough.

Common Mistakes to Avoid

WRONG Calling a setter while building JSX.

RIGHT Calculate JSX only during render.

Render should be pure.

WRONG Fixing the warning with setTimeout.

RIGHT Use useEffect or event handlers based on the cause.

setTimeout hides timing bugs.

WRONG Storing every derived value in state.

RIGHT Compute derived values from props and state when possible.

Less state means fewer update loops.

Practice Tasks

Find a setter call in a component body and move it to useEffect.
Rewrite a parent update so it happens from a button click.
Create a derived value with const instead of state.
Explain the difference between render, event, and effect timing.

Frequently Asked Questions

Why does React warn about updating a component while rendering another?

React's rendering must be a pure, deterministic process. Updating state during render creates side effects that can cause inconsistent UI, infinite loops, and unpredictable behavior.

Is this a warning or an error?

In React 16-17 it was a warning. In React 18 it may throw an error in some cases. Either way, it indicates a bug that should be fixed "" the component will likely behave incorrectly.

How do I update parent state from a child component correctly?

Pass a callback function from parent to child as a prop. The child should call this callback inside a useEffect (for mount-time updates) or inside an event handler (for user-triggered updates).

What is the difference between this warning and "Too many re-renders"?

"Cannot update while rendering" is about calling setState during the render phase. "Too many re-renders" is about setState being called so frequently that React hits its render limit (usually 50 renders).

Can useEffect cause this warning?

useEffect itself runs after render, so it does not directly cause this warning. However, if useEffect has no dependency array and updates state, it can trigger infinite re-renders which may surface related warnings.

Previous Next

Cannot update component while rendering React Fix: Tutorial, Examples, FAQs & Interview Tips