Warning: Cannot update during an existing state transition

You’re calling setState during render — usually inside the component body instead of in an event handler or useEffect.

Fix 1: Move setState to useEffect

// ❌ Setting state during render
function Component({ value }) {
  setCount(value);  // Triggers re-render during render!
  return <div>{count}</div>;
}

// ✅ Use useEffect
function Component({ value }) {
  useEffect(() => {
    setCount(value);
  }, [value]);
  return <div>{count}</div>;
}

Fix 2: Don’t call setState in render logic

// ❌ Calling setState in a condition during render
if (items.length > 0) {
  setHasItems(true);  // Bad!
}

// ✅ Derive the value instead
const hasItems = items.length > 0;

Related resources

• React complete guide