Cannot update component while rendering - React Fix (2026) | Tutorials Logic

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)

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

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

Common Scenarios & Solutions

Scenario 1: setState Called in Render Body

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.

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

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

  return 
{count}
;
}

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

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

  return {count};
}

Scenario 2: Child Component Calling Parent setState During Render

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.

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

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

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

  return 
Child
;
}

Scenario 3: useEffect with Missing Dependencies

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.

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

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

  return 
{data}
;
}

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

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

  return 
{data}
;
}

Scenario 4: Immediately Invoked Event Handler

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

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

  return (
    // ❌ setActive(true) is called immediately during render!
    Activate
  );
}

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

  return (
    // ✅ Arrow function wraps the call — only runs on click
     setActive(true)}>Activate
  );
}

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

• Too many re-renders
• Invalid hook call
• Maximum update depth exceeded