React: Hooks Rules and Common Pitfalls

Q: Why doesn’t the page update sometimes after calling setState ?

Possible reasons: ① You modified the state object directly (without creating a new reference); ② The state value didn’t change (React uses Object.is to compare values; identical values do not trigger a render); ③ You forgot to declare the updated variable in the useEffect ’s dependencies array; ④ You read an old closure value in an asynchronous callback.

Q: What’s the difference between setting the dependencies array to empty and leaving it empty in useEffect ?

Leaving the dependencies array empty useEffect(fn) → Executes after every render (on mount + every update); An empty dependencies array useEffect(fn, []) → Executes only once during mounting; Non-empty dependencies useEffect(fn, [a, b]) → Executes during mounting + executes when a or b changes. The most common source of bugs: specifying an empty array but using state or props inside the effect (closure trap).

Last updated: 2026-08-26

1. What You'll Learn

The Two Iron Laws of Hooks (Why You Can’t Call Them Conditionally)
Identifying and Fixing Stale Closures
5 Reasons for an Infinite Loop in useEffect
Pitfalls of Asynchronous Updates with useState
Solutions for the 10 Most Common Bugs

2. A Story of a Debugging Nightmare

(1) Pain Point: It took 3 hours to debug a single `useEffect`

Alice wrote a countdown component:

▶ Example: Hooks Rule Demo

Output:

TEXT 📖 Display only

State: timeLeft. side effects via useEffect. interval updates

JSX

function Countdown({ targetDate }) {
  const [timeLeft, setTimeLeft] = useState(computeTimeLeft())

  function computeTimeLeft() {
    return Math.max(0, Math.floor((new Date(targetDate) - Date.now()) / 1000))
  }

  useEffect(() => {
    const timer = setInterval(() => {
      // ❌ Closure Pitfalls：timeLeft Always the initial value
      setTimeLeft(timeLeft - 1)
    }, 1000)

    return () => clearInterval(timer)
  }, [])  // I want it to start only when mounted

  return <p>Remaining：{timeLeft}s</p>
}

Call Location	Valid	Reason
Top-level function components	✅	The order of the Hooks chain remains consistent with every render
Top-level custom hooks	✅	Custom hooks are essentially sub-call chains of function components
Inside if / for / while	❌	Changes in conditions cause inconsistent hook call counts, resulting in linked list misalignment
General utility functions	❌	Not in the React component context; no Hooks chain
Class Component Methods	❌	Class components do not have a Hooks chain mechanism
Inside a useEffect retorno de chamada	❌	The retorno de chamada is not at the top level of the component, so the call order is unpredictable

Closure Pitfall Scenarios	Symptoms	Solutions
Reading state in setInterval	The value in the timer never changes	Functional updates `setState(prev => ...)`
Reading state in `useCallback`	Using an old value in the callback	Adding state to the dependency array or using a ref
Event handler execution is delayed	The `state` value in an asynchronous callback is outdated	Use `useRef` to store the latest value
Missing useEffect dependencies	Variables used in the effect are not updated	Complete the dependency array
Set race condition after an asynchronous request	Old request overwrites new results during fast switching	Use the `ignore` flag or `AbortController`

Causes of Infinite Loops	Incorrect Code	Correct Code
No array dependencies	`useEffect(fn)`	`useEffect(fn, [])`
Reference Types	`useEffect(fn, [{ count }])`	`useEffect(fn, [count])`
Modify dependencies in `effect`	`useEffect(() => setItems(...), [items])`	Mark initialization with `useRef`
Functions as Dependencies	`useEffect(fn, [handleClick])`	`useCallback` Stable References
Object as a dependency	`useEffect(fn, [config])`	Extract a primitive type value or use `useMemo`

React: Hooks Rules and Common Pitfalls

1. What You'll Learn

2. A Story of a Debugging Nightmare

(1) Pain Point: It took 3 hours to debug a single useEffect

▶ Example: Hooks Rule Demo

(2) Fix

3. The Two Ironclad Rules of Hooks

(1) Rule 1: Call hooks only at the top level

(2) Rule 2: Call Hooks Only in Function Components or Custom Hooks

(3) Why are these two rules so important?

4. Pitfall 1: The Stale Closure Pitfall

5. Pitfall 2: useEffect Infinite Loop

(1) Reason 1: No array of dependencies

(2) Reason 2: Reference types in the dependency array

(3) Reason 3: Modifying dependencies inside useEffect

(4) Reason 4: Functions as Dependencies

6. Pitfall 3: Asynchronous Updates with useState

7. Pitfall 4: Using async in useEffect

8. Complete Example: 10 Common Bug Diagnosis Tables

9. Debugging Tips

(1) React DevTools Profiler

(2) why-did-you-render

(3) Debugging with useWhyDidYouUpdate

▶ Example 2: Using a Custom Hook to Avoid Closure Pitfalls — useStableCallback

▶ Example 3: Pitfalls and Fixes for Batch Updates with useState

▶ Example 4: Race Conditions in Asynchronous Requests with useEffect

▶ Example 5: Using useReducer Instead of Multiple useState Calls to Avoid State Inconsistencies

❓ FAQ

📖 Summary

📝 Exercises

🙏 帮我们做得更好

(1) Pain Point: It took 3 hours to debug a single `useEffect`

(3) Reason 3: Modifying dependencies inside `useEffect`

6. Pitfall 3: Asynchronous Updates with `useState`

7. Pitfall 4: Using `async` in `useEffect`

(3) Debugging with `useWhyDidYouUpdate`

▶ Example 5: Using `useReducer` Instead of Multiple `useState` Calls to Avoid State Inconsistencies