为何第一个代码片段可解决过时闭包问题，第二个却不行？

我认为两段代码看起来并无差异，但第一个代码片段能够解决过时闭包（stale closure）问题，第二个却做不到。我无法理解其中原因，恳请有人从JavaScript闭包的原理角度为我解释。

// ========================== 第一段代码 ========================

let _formVal
export default function App() {
  const [formVal, setFormVal] = useState('');

  _formVal = formVal

  const handleSubmit = useCallback(() => {
    console.log('_formVal:', _formVal);
  }, []);

  return (
    <>
      <input
        onChange={(e) => {
          setFormVal(e.target.value);
        }}
        value={formVal}
      />
      <MemoziedSuperHeavyComponnent onSubmit={handleSubmit} />
    </>
  );
}

// ========================== 第二段代码 ========================

export default function App() {
  const [formVal, setFormVal] = useState('');

  const _formVal = formVal
  const handleSubmit = useCallback(() => {
    console.log('_formVal:', _formVal);
  }, []);

  return (
    <>
      <input
        onChange={(e) => {
          setFormVal(e.target.value);
        }}
        value={formVal}
      />
      <MemoziedSuperHeavyComponnent onSubmit={handleSubmit} />
    </>
  );
}

核心差异：变量作用域与闭包捕获逻辑 #

两段代码的本质区别在于_formVal的声明位置和作用域，这直接决定了闭包能拿到的值是最新的还是过时的：

• 第一段代码：模块级变量的引用捕获
  _formVal是声明在App组件外部的模块级变量，它的生命周期和整个模块绑定，不会随组件渲染重新创建。每次App因formVal更新而重新渲染时，都会把当前最新的formVal赋值给这个外部变量。
  handleSubmit通过useCallback创建且依赖为空，所以它始终是第一次渲染生成的函数，但这个函数的闭包捕获的是_formVal变量的引用，而非固定值。调用handleSubmit时，它会直接读取_formVal的当前最新值，自然不会出现过时闭包问题。

• 第二段代码：组件内常量的值绑定
  _formVal是App函数内部的const常量，每次组件重新渲染都会生成一个全新的_formVal，指向当前周期的formVal。但handleSubmit是第一次渲染时创建的（依赖为空的useCallback会缓存这个函数），它的闭包只能绑定到第一次渲染时的那个_formVal常量。后续更新产生的新_formVal和这个旧函数完全无关，所以调用时永远拿到的是第一次的旧值，这就是典型的过时闭包。

闭包本质补充 #

闭包的核心是函数会捕获其定义时所在词法环境中的变量：

• 如果捕获的是可变变量的引用（比如第一段的模块级变量），变量后续的取值变化会被闭包感知；
• 如果捕获的是函数内的局部常量/变量（比如第二段的const _formVal），每次渲染都会生成新的变量实例，旧闭包只能绑定到定义时的那个实例，无法获取后续新实例的值。

内容的提问来源于stack exchange，提问作者sam liu