React中创建依赖state的变量应选var/let/const还是useRef？

这个场景下应该选择 const 声明even和odd两个依赖state的变量。

选型原因 #

• even和odd是基于当前渲染周期内的counter state计算得到的派生值，每次组件因为counter更新触发重渲染时，两个值都会重新计算，且计算完成后在当前渲染周期内不会被修改，完全符合const声明「不可重新赋值变量」的使用规则。
• 使用const可以主动避免后续代码意外修改这两个派生值，降低不可预期bug的出现概率，代码可读性也更高。

其余选项不合适的原因 #

• var：属于JavaScript旧版变量声明语法，存在变量提升、无块级作用域的缺陷，目前现代前端开发包括React开发都已经全面淘汰该写法。
• let：仅适用于声明后续需要重新赋值的变量，当前场景下even和odd计算完成后没有修改需求，用let不仅冗余，还会额外增加变量被意外修改的风险。
• useRef：useRef存储的值具备「更新不触发重渲染、跨渲染周期保留值」的特性，而当前场景的两个变量需要和counter同步更新、每次重渲染都要生成新值，完全不需要跨渲染周期保留旧值，使用useRef反而会额外增加维护成本，还可能出现值和当前counter不同步的问题。

内容的提问来源于stack exchange，提问作者azhar dif a