React组件加载时状态被覆盖出现闪烁，如何在localStorage加载后渲染

问题原因 #

你遇到的闪烁是React的渲染逻辑导致的：

1. 你给alltodos的初始值是空数组，组件第一次渲染时会用这个空数组计算待办数量，显示为0
2. 渲染完成后才会执行空依赖的useEffect，读取localStorage的内容更新alltodos
3. 状态更新触发二次渲染，才会显示正确的待办数量，两次渲染的间隔就是你看到的闪烁效果

解决方案 #

直接将localStorage读取逻辑放到useState的惰性初始化函数中即可，localStorage是同步API，不需要等待渲染完成后再读取：

// 替换原来的 useState 定义即可
const [alltodos, handleTodos] = useState(() => {
  try {
    const items = localStorage.getItem("todos");
    return items ? JSON.parse(items) : [];
  } catch (err) {
    // 本地存储内容格式异常时返回空数组兜底
    return [];
  }
});

修改后可以直接删除原来用来读取localStorage的空依赖useEffect，组件第一次渲染时alltodos就已经是本地存储的正确值，不会再出现0的中间状态，闪烁问题自然解决。

补充说明 #

如果后续你换成异步接口拉取初始数据（比如从后端接口拿待办列表），可以加一个加载状态变量，初始值为true，拉取完成后改为false，渲染时判断加载状态为false再渲染计数器和待办列表即可。

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