React：未被事件处理器调用的useState变量在调试器中为何不可用？

这是我在Stack Overflow的第一个问题！希望格式正确。

问题详情 #

在Chrome浏览器的事件处理器调试器中，为何未被事件处理器使用的useState变量无法访问？

例如，调试时testBoolean不可用（“监视”标签显示<not available>，控制台提示Uncaught ReferenceError: testBoolean is not defined）。

若注释掉console.log(count)语句，count变量也会变为不可用。

示例代码 #

import { useState } from 'react';
import Game from './Game';

export default function App() {
    const [testBoolean, setTestBoolean] = useState(true);
    const [count, setCount] = useState(0);

    const handleClick = () => {
        setCount(c => c + 1);
        console.log(count);
        debugger
    }

    return (
        <div>
            <button onClick={handleClick}>Clicked {count} times</button>
        </div>
    )
}

我的思路与搜索情况 #

我曾搜索类似react debugger unused useState variables not available in event handler的内容，但找到的大多是关于事件处理器存在过期useState值的问题，与当前问题完全不同。我的一些想法：

• handleClick是箭头函数，应该会闭包函数组件中的其他常量？
• 调用handleClick时，组件函数已执行并返回虚拟DOM元素，useState变量应该已声明。

期待各位的见解，这对理解React事件流至关重要，感谢解答。

解答 #

这本质是JavaScript引擎的死代码消除（Tree Shaking）和React打包优化共同作用的结果：

1. 闭包的实际捕获规则
   箭头函数确实会形成闭包，但JavaScript引擎会做优化——如果闭包内部没有引用某个变量，就不会把这个变量纳入闭包的作用域链。也就是说，handleClick里没用到testBoolean，所以这个变量不会被闭包捕获，调试时自然访问不到。

2. React的打包优化
   即使在开发模式下，React也会配合打包工具（比如Webpack、Vite）对未被引用的变量做处理。只要组件里声明的testBoolean没在当前渲染周期或事件处理器中被使用，就会被视为无用代码，在编译阶段被剔除，调试器自然找不到它的踪迹。

3. 关于count的变化
   当你注释掉console.log(count)后，handleClick里的setCount(c => c + 1)用的是函数式更新，直接接收最新的状态值作为参数，并没有引用外部的count变量。此时count也没被闭包捕获，同样会被优化掉，导致调试时不可用。

简单来说：只有被闭包实际引用的变量，才会被保留在作用域中供调试访问；未被引用的变量会被JS引擎和打包工具优化移除，自然在调试器里找不到。

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