You might notice that this line reflects updated value.
② 创建定时器
useEffect 的回调里设置了定时器。
"每秒" 的间隔会持续触发内部箭头函数。
③ 定时器回调访问外部变量 count
"词法作用域"让回调函数记住创建时所在作用域中的count.
This is where trap starts.
The callback captures a **snapshot** of count,not its live value.
④ 清理函数 & 清除旧定时器
⑤依赖数组包含
If you want timer to always see latest count you can eir:
Add ode>ode> as a dependency.
Create a ref that always holds latest value.
Avoid using timers altoger.
}
三、为什么很多人一开始会写
If you look at real‑world codebases you’ll find many developers deliberately leave dependency array empty to avoid re‑creating timers on every render. They often believe that an empty array means “run once”. But this is exactly what triggers closure trap.
count
You might ask yourself:
I don’t want to recreate my interval each time I click.
I just want one stable timer that prints latest state.
}
四、什么是 React 闭包？它从何而来，
. JavaScript 闭包回顾
A closure is a function that remembers variables from its lexical scope even when executed elsewhere.
ode>class-name=“hljs language-js” lang=“js”>
function outer {
let message = 'Hello';function inner {
console.log;}
return inner;按理说，}
const fn = outer;fn，// Still prints 'Hello'
. React 中的闭包
A functional component runs once per render. Every render creates a new “render closure” containing fresh copies of props and state snapshots.
The same render's callbacks all close over that snapshot.
This explains *** your interval always sees initial count.
A state update triggers a new render → new closure.
Old closures keep referencing stale values.
}
. 闭包陷阱的影响
Dated data:An async callback may act on stale state leading to bugs or UI glitches.
Circular updates:If an effect modifies state without listing it as a dependency you can enter infinite loops.
Poor performance:Eagerly re‑creating timers or subscriptions due to dependencies can waste resources.
五、如何避免闭包陷阱？
Below are proven patterns. Pick whichever fits your scenario.
useEffect=>{
const t=setInterval=>{ console.log;},1000)，return =>clearInterval;},)，// 初始化一次
``
*Why it works:* The interval’s closure captures *object reference* rar than its current property value.cntRef.current` is updated by anor effect whenever state changes.
场景 C – 基于最新状态更新状态
If your callback needs to update based on current state:
html
setCnt;// prev is always fresh
This solves updates but not reads in async callbacks.
场景 D – 将函数传递给子组件
Use ode>useCallback.
html
const handleClick = useCallback=>{ console.log;},)，
场景 E – 实验性 Hook / 第三方库
React 正在讨论 ode>useEvent which returns a stable function reference while still seeing fresh props/state.
Until n consider libraries like ahooks' ode>useMemoizedFn.
