在React的setState回调中调用localStorage.setItem是否影响性能？

你的这段代码完全可以正常工作，核心逻辑是合理的：

• 利用setState的 updater 函数特性，确保每次获取到的prevState都是最新的，避免了 stale state 问题
• 在更新状态的同时同步将新值存入localStorage，保证了状态和本地存储的一致性

具体说明： #

• React 会在调用 setState 的 updater 函数时传入当前最新的状态值，所以你的callback总能拿到准确的prevState，不会出现状态过期的情况
• 将localStorage.setItem放在 updater 内部，确保了存储的值和最终设置的状态完全一致，不会出现中间状态的偏差

潜在需要注意的点： #

• 错误处理：localStorage可能会抛出异常（比如存储空间不足、隐私模式下被禁用等），建议把存储操作包裹在try/catch里，避免因为存储失败导致状态更新中断：

  setState(prev => {
    const newValue = callback(prev);
    try {
      localStorage.setItem("demo", JSON.stringify(newValue));
    } catch (err) {
      console.error("Failed to save to localStorage", err);
    }
    return newValue;
  })
  

• 函数稳定性：setValue会在组件每次渲染时重新创建。如果把它传递给子组件，可能会导致子组件不必要的重渲染（除非子组件用React.memo包裹）。如果在意这点，其实可以用useCallback包裹setValue——因为它只依赖稳定的setState，依赖数组是空的：

  const setValue = useCallback((callback) => {
    setState(prev => {
      const newValue = callback(prev);
      localStorage.setItem("demo", JSON.stringify(newValue));
      return newValue;
    })
  }, []);
  

• 数据一致性：如果其他代码绕过setValue直接修改localStorage，组件状态会和本地存储不同步。这是所有状态与本地存储同步方案都需要注意的问题，和你的实现方式无关

和useEffect方案的对比： #

用useEffect监听状态变化再更新localStorage的方式，是在组件渲染完成后异步执行存储操作；而你的方案是在状态更新的同步流程里完成存储。两种方式都有效，你的方案能保证状态和存储在渲染前就同步完成，适合对一致性要求较高的场景

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