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

// ❌ 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>;
}