React.useState传入的初始值更新后，对应状态为何没有同步更新？

现象产生原因 #

• useState 接收的初始值仅在组件首次挂载时生效，和是否使用懒初始化没有关联。后续组件触发重渲染时，React会直接返回每个useState对应的当前已保存的状态值，完全忽略重渲染时传入的新初始值。
• 懒初始化（即useState(() => 初始值)）的作用仅为优化首次渲染性能：如果初始值需要经过复杂计算得到，用函数包裹可以保证这段计算逻辑仅在首次挂载时执行一次，避免重渲染时重复执行无意义的计算，它并没有改变「初始值仅读取一次」的核心规则。
• 对应到你的代码逻辑：
  1. 组件首次挂载时，count的初始值为0，因此count2初始化为0
  2. 点击按钮更新count后组件触发重渲染，此时useState(count)传入的最新count值会被React直接忽略，count2返回的仍然是之前保存的0，因此不会同步更新。

修复方案 #

如果需要count2跟随count同步更新，可以选择两种方案：

1. 不需要count2独立修改时，直接使用派生值即可，无需单独声明为状态：

// 删掉原有的 const [count2] = React.useState(count)
const count2 = count

2. 如果需要count2后续可以独立于count修改，用useEffect监听count变化同步更新：

const [count, setCount] = React.useState(0)
const [count2, setCount2] = React.useState(count)

React.useEffect(() => {
  setCount2(count)
}, [count])

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