依赖数组与闭包陷阱：stale closure

import { useEffect, useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      setCount(count + 1);  // ❌ 这里的 count 永远是 0
    }, 1000);
    return () => clearInterval(id);
  }, []);  // 空依赖：effect 只在首次渲染时执行这一轮

  return <p>{count}</p>;  // 界面永远显示 1
}

useEffect(() => {
  const id = setInterval(() => {
    setCount(count + 1);
  }, 1000);
  return () => clearInterval(id);
}, [count]);
// ❌ 依赖一变 → 清掉旧定时器 → 再建一个新定时器，每秒循环一次

function makeCounter() {
  let n = 0;
  return () => {
    n = n + 1;  // 这个箭头函数记住了 n——makeCounter 的局部变量
    return n;
  };
}

const next = makeCounter();
next();  // 1
next();  // 2 —— makeCounter 早已返回，n 却一直活着

// 第 1 次渲染：
const count = 0;                    // 全新常量，只属于这一次渲染
useEffect(() => {
  // 定时器 A 在这里创建，闭包捕获的 count 就是上面那个 0
}, []);

// 第 2 次渲染：count 是另一个全新常量，值为 1
// 但 deps=[] → effect 不再执行 → 定时器 A 还是第 1 次那个，它眼里的 count 永远是 0

import { useState } from "react";

function Mystery() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
    setTimeout(() => {
      alert(count); // 3 秒后显示的是「点击那次渲染」的 count
    }, 3000);
  }

  return <button onClick={handleClick}>{count}</button>;
}

useEffect(() => {
  const id = setInterval(() => {
    setCount(c => c + 1);  // ✅ 不读捕获的 count，由 React 提供「最新值」
  }, 1000);
  return () => clearInterval(id);
}, []);  // deps 保持 []：定时器真的只建一次

useEffect(() => {
  const id = setInterval(() => {
    console.log(`当前次数：${count}`);  // 每一轮闭包里的 count 都是新鲜的
  }, 1000);
  return () => clearInterval(id);
}, [count]);  // ✅ 诚实声明：count 变了，就重建 effect 和它的闭包

const countRef = useRef(count);  // 一个跨渲染的「可变盒子」

useEffect(() => {
  countRef.current = count;      // 每次渲染，把最新值放进盒子
}, [count]);

useEffect(() => {
  const id = setInterval(() => {
    setCount(c => c + 1);
    console.log(countRef.current);  // 读到的永远是最新值
  }, 1000);
  return () => clearInterval(id);
}, []);  // 定时器仍然只建一次

{
  "rules": {
    "react-hooks/rules-of-hooks": "error",  // Hook 只在顶层调用等硬性规则
    "react-hooks/exhaustive-deps": "warn"   // 依赖补全检查：别关！
  }
}