How to fix Cannot update component state during its rendering phase in React

What this error means

This error is React's way of preventing a common anti-pattern where state updates happen during the render phase. When a component is rendering, React is calculating what the UI should look like based on the current state and props. If you try to update state during this calculation, it creates a circular dependency: the render triggers a state update, which triggers another render, which triggers another state update, and so on. React's rendering process must be a pure function - given the same inputs (state and props), it should always produce the same output (JSX). State updates during render violate this principle because they introduce side effects into the render phase. This can lead to infinite loops, inconsistent UI states, performance degradation, and unpredictable component behavior. The error typically manifests as a warning in development mode before causing more serious issues. React 18 and later versions have become more strict about detecting and warning about these patterns to help developers catch them early.

Typical symptoms

• Warning message in console: "Cannot update a component while rendering a different component"
• Browser freezing or becoming unresponsive due to infinite render loop
• React DevTools showing rapidly increasing render counts
• Component flickering or displaying inconsistent data
• Application performance severely degraded
• Maximum update depth exceeded error following the initial warning

Common causes

1. Calling setState directly in the component body outside of event handlers or effects
2. Using useEffect or useLayoutEffect without proper dependency arrays, causing state updates on every render
3. Defining event handlers inline that immediately invoke state-updating functions during render
4. Calling state updater functions inside render methods of class components
5. Updating parent component state from child component during child's render phase
6. Using useMemo or useCallback incorrectly to trigger state updates
7. Conditional logic that updates state based on props or state during render

How to fix "Cannot update component state during its rendering phase"

// ❌ Bad: setState during render
function MyComponent({ userId }) {
  const [user, setUser] = useState(null);

  // This runs during render and causes the error
  if (userId !== user?.id) {
    setUser(null); // Don't do this!
  }

  return <div>{user?.name}</div>;
}

// ✅ Good: setState in useEffect
function MyComponent({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // State update happens after render
    setUser(null);
    // Fetch new user data...
  }, [userId]); // Only run when userId changes

  return <div>{user?.name}</div>;
}

// ❌ Bad: Missing dependency array causes infinite loop
function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setCount(count + 1); // Runs on every render!
  }); // No dependency array

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

// ✅ Good: Empty array runs once, or specify dependencies
function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // This runs once on mount
    const timer = setTimeout(() => setCount(1), 1000);
    return () => clearTimeout(timer);
  }, []); // Empty array = run once

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

// ❌ Bad: Calling updater during render
function SearchBox({ onSearch }) {
  const [query, setQuery] = useState('');

  // This runs during every render!
  setQuery(getDefaultQuery());

  return <input value={query} />;
}

// ✅ Good: Initialize with proper default or update in handler
function SearchBox({ onSearch }) {
  const [query, setQuery] = useState(() => getDefaultQuery());

  const handleChange = (e) => {
    setQuery(e.target.value);
    onSearch(e.target.value);
  };

  return <input value={query} onChange={handleChange} />;
}

// ❌ Bad: Child updating parent during render
function Parent() {
  const [data, setData] = useState(null);
  return <Child onDataChange={setData} />;
}

function Child({ onDataChange }) {
  const result = calculateSomething();
  onDataChange(result); // Called during render!
  return <div>{result}</div>;
}

// ✅ Good: Child uses effect or event handler
function Parent() {
  const [data, setData] = useState(null);
  return <Child onDataChange={setData} />;
}

function Child({ onDataChange }) {
  const result = calculateSomething();

  useEffect(() => {
    onDataChange(result); // Called after render
  }, [result, onDataChange]);

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

// ❌ Bad: Updating state based on other state
function TodoList({ todos }) {
  const [filteredTodos, setFilteredTodos] = useState([]);
  const [filter, setFilter] = useState('all');

  // Anti-pattern: updating state during render
  if (filter === 'active') {
    setFilteredTodos(todos.filter(t => !t.completed));
  }

  return <div>{filteredTodos.map(...)}</div>;
}

// ✅ Good: Derive state from props/state
function TodoList({ todos }) {
  const [filter, setFilter] = useState('all');

  // Calculated during render (no state update needed)
  const filteredTodos = useMemo(() => {
    return todos.filter(t =>
      filter === 'all' ||
      (filter === 'active' && !t.completed) ||
      (filter === 'completed' && t.completed)
    );
  }, [todos, filter]);

  return <div>{filteredTodos.map(...)}</div>;
}

Advanced notes

Frequently asked questions

What does "Cannot update component state during its rendering phase" mean?

This error is React's way of preventing a common anti-pattern where state updates happen during the render phase. When a component is rendering, React is calculating what the UI should look like based on the current state and props. If you try to update state during this calculation, it creates a circular dependency: the render triggers a state update, which triggers another render, which triggers another state update, and so on.

How do I fix "Cannot update component state during its rendering phase"?

This error occurs when a React component attempts to call setState or dispatch a state update while the component is currently rendering. This disrupts React's rendering cycle and can cause infinite loops or unpredictable behavior.

What causes "Cannot update component state during its rendering phase"?

Calling setState directly in the component body outside of event handlers or effects Using useEffect or useLayoutEffect without proper dependency arrays, causing state updates on every render Defining event handlers inline that immediately invoke state-updating functions during render

Is the "Cannot update component state during its rendering phase" error serious?

Yes. This is a high-severity error that usually blocks work until it is fixed, but the steps above resolve it.

Related errors

• TypeError: this.state is not an object

  TypeError: this.state is not an object

  HIGH

• Warning: Failed to parse source map from '<path>' Error: ENOENT: no such file or directory

  How to fix "Failed to parse source map" in React

  LOW

• Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

  How to fix "State update on unmounted component" in React

  MEDIUM

• Warning: Can't call setState (or forceUpdate) on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};` class property with the desired state in the component.

  Can't call setState on a component that is not yet mounted

  MEDIUM

• Failed to resolve import. Does the file exist?

  How to fix "Failed to resolve import" in React

  HIGH

• npm ERR! code ETIMEDOUT npm ERR! network request to https://registry.npmjs.org timed out

  npm registry request timed out

  MEDIUM

Official resources & further reading

• 📚React Official Documentation