React Too Many Re-renders Error

Never call setState directly in the component body.

function Counter() {
  const [count, setCount] = useState(0)
  
  // ❌ Direct call in render body causes infinite loop
  setCount(count + 1) // DON'T DO THIS
  
  // ✅ Call in event handler
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>
}

Move state updates that depend on other state changes into useEffect.

function SearchResults({ query }) {
  const [results, setResults] = useState([])
  const [loading, setLoading] = useState(false)
  
  // ✅ Side effects go in useEffect
  useEffect(() => {
    if (!query) return
    setLoading(true)
    fetch(`/api/search?q=${query}`)
      .then(res => res.json())
      .then(data => {
        setResults(data)
        setLoading(false)
      })
  }, [query]) // ✅ Only runs when query changes
  
  return <div>...</div>
}

When updating state based on previous state, use the functional form.

const [count, setCount] = useState(0)

// ❌ Might cause issues if called rapidly
setCount(count + 1)

// ✅ Functional form is safer
setCount(prev => prev + 1)