React使用useCallback优化渲染时为何计数器状态异常重置？

• 违反Hooks顶层调用规则：代码将useCallback直接写在speakers.map的循环回调内部，而React明确要求所有Hooks必须在组件顶层调用，不能放在循环、条件判断、嵌套语句中。这种写法会导致每次渲染时Hook的调用顺序错乱，从根本上不符合React的运行机制。
• 闭包捕获过期状态：没有添加useCallback时，每次SpeakerList渲染时，循环里生成的事件处理函数都会绑定当前渲染周期的最新speakers值，因此可以正常拿到最新状态完成计数更新；但代码中给useCallback传入空依赖数组[]，会让回调函数永久绑定组件首次渲染时捕获的初始speakers值。后续状态更新后，这个回调里拿到的仍然是最开始的、所有点击计数为0的初始数组，每次点击触发状态更新时，都是基于这份旧的初始数据计算结果，最终自然会把计数器重置回初始值。
• 冗余的函数创建：循环内部给每个Speaker单独生成事件处理函数，本身就完全没有必要，所有speaker的点击逻辑是完全一致的，重复创建函数反而抵消了memo组件的优化效果。

1. 把事件处理回调从循环内部移动到SpeakerList组件的顶层调用，确保Hooks的调用顺序固定。
2. 改用React状态的函数式更新语法，不依赖外层闭包捕获的speakers值，直接从更新函数的入参拿到最新的状态数据，从根源上避免闭包过期问题：

   function SpeakerList({ speakers, setSpeakers }) {
     // 顶层调用useCallback，符合Hook调用规则
     const speakerClick = useCallback((id) => {
       // 函数式更新，拿到最新的状态值，不需要依赖外层闭包的speakers
       setSpeakers(prevSpeakers => 
         prevSpeakers.map(speaker => 
           speaker.id === id 
             ? { ...speaker, clickCount: speaker.clickCount + 1 }
             : speaker
         )
       )
     }, [setSpeakers])
   
     return (
       <div>
         {speakers.map((speaker) => {
           return (
             <Speaker
               key={speaker.id}
               speaker={speaker}
               speakerClick={speakerClick}
             />
           );
         })}
       </div>
     );
   }
   

3. 改造完成后，speakerClick的函数引用在组件整个生命周期内只会生成一次，配合memo包裹的Speaker组件，才能真正实现避免无意义重复渲染的优化目标，同时不会再出现状态被重置为初始值的异常。

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