Detailed Explanation of React Hooks Principles and Best Practices

1. Background and Core Concepts of Hooks

• Background: Class components had pain points such as difficulty in code reuse (nested higher-order components), hard-to-maintain logic when complex, and this binding issues.
• Definition: Hooks are features introduced in React 16.8 that allow using state and other React features in function components.
• Core Rules:
  • Only use Hooks at the top level (cannot call them inside conditions/loops).
  • Only call Hooks from React function components or custom Hooks.

2. useState Principle and Implementation Mechanism

• Basic Usage: const [state, setState] = useState(initialValue)
• Principle Analysis:
  • React stores all Hook states of a component via a singly linked list.
  • During initial render, Hook linked list is established in order; subsequent renders match states via the list order.
  • setState triggers re-rendering, but the state reference remains unchanged (shallow comparison).
• Example Code Analysis:

  function Counter() {
    const [count, setCount] = useState(0);
    // Underlying implementation pseudo-code:
    // 1. Create Hook node { memoizedState: 0, queue: [] }
    // 2. When setCount is called, updates are added to the queue
    // 3. During re-render, read the corresponding Hook state in order
  }
  

3. useEffect Lifecycle Management

• Execution Timing: Executes asynchronously after DOM updates, does not block browser rendering.
• Dependency Array Mechanism:
  • Empty array []: Executes only on mount (like componentDidMount).
  • No dependencies: Executes after every render.
  • With dependencies [dep]: Executes when dependencies change.
• Cleanup Function: The returned function executes before component unmounts or before the next effect runs.
• Implementation Principle: Uses closure to save callback functions; dependency comparison uses Object.is.

4. Performance Optimization with useCallback and useMemo

• useCallback: Caches function references to avoid unnecessary re-renders of child components.

  const memoizedCallback = useCallback(() => {
    doSomething(a, b);
  }, [a, b]); // Function is recreated only when a/b change
  

• useMemo: Caches calculation results to avoid repeated computations.

  const expensiveValue = useMemo(() => {
    return computeExpensiveValue(a, b);
  }, [a, b]);
  

• Usage Principle: Use only when there is a measurable performance impact; avoid premature optimization.

5. Advanced Usage of useRef and useContext

• useRef: Creates a persistent reference unaffected by re-renders.
  • Accessing DOM elements: const inputRef = useRef()
  • Storing mutable values: const intervalRef = useRef() (similar to instance properties in class components).
• useContext: Passes data across component levels.

  const ThemeContext = createContext();
  function App() {
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
  function Toolbar() {
    const theme = useContext(ThemeContext); // Directly gets the value
  }
  

6. Custom Hook Design and Practice

• Definition: A function starting with use that can call other Hooks inside.
• Logic Reuse Example (Network Request):

  function useApi(url) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
  
    useEffect(() => {
      fetch(url)
        .then(res => res.json())
        .then(setData)
        .finally(() => setLoading(false));
    }, [url]);
  
    return { data, loading };
  }
  // Usage: const { data, loading } = useApi('/api/user');
  

7. Hooks Best Practices and Common Pitfalls

• Pitfall 1: Stale Closures

  // Wrong: count inside interval is always the initial value
  useEffect(() => {
    setInterval(() => {
      console.log(count); // Always 0
    }, 1000);
  }, []);
  
  // Correct: Use ref or dependency array
  useEffect(() => {
    setInterval(() => {
      console.log(countRef.current);
    }, 1000);
  }, []);
  

• Pitfall 2: Infinite Render Loop

  // Wrong: Effect updates state and also depends on it
  const [count, setCount] = useState(0);
  useEffect(() => {
    setCount(count + 1); // Causes infinite loop
  }, [count]); // Depends on count
  

• Practice Suggestions: Use ESLint plugin to check Hook rules, split complex components reasonably.

8. Comparison Summary between Hooks and Class Components

• Code Amount: Hooks are usually more concise (reduces code by about 30%).
• Logic Reuse: Custom Hooks are superior to HOC/Render Props.
• Learning Curve: Hooks require understanding functional programming mindset.
• Performance: useMemo/useCallback can achieve effects similar to shouldComponentUpdate.