React StrictMode导致状态初始更新两次的问题咨询

是的，React StrictMode 在开发模式下确实会刻意触发两次 useEffect（以及组件渲染、状态初始化等操作），这是它的设计特性，不是 bug。

为什么 StrictMode 要这么做？ #

StrictMode 的核心作用是帮开发者提前排查潜在问题：

• 检测副作用中的非幂等操作（比如重复发起请求、重复修改全局状态）
• 暴露未清理的资源泄漏（比如忘记清除的定时器、事件监听器）
• 识别过时的 React API 使用

这个行为仅在开发模式生效，生产环境下不会出现重复执行的情况。

你的代码为什么会输出 [1,1]？ #

你的 useEffect 依赖数组为空，意味着它会在组件首次渲染完成后执行。在 StrictMode 的开发模式下，这个 useEffect 会被连续执行两次：

1. 第一次执行：setArr 基于初始状态 []，将数组更新为 [1]
2. 第二次执行：此时组件状态已经是 [1]，setArr 基于这个状态再添加一个 1，最终得到 [1,1]

如何处理？ #

如果你的副作用逻辑本就只需要执行一次（比如初始化数据），其实不需要修改代码——因为生产环境下只会执行一次，不会有问题。

如果想在开发模式下避免这种重复更新的情况，可以用 useRef 标记是否已经执行过初始化：

import { useEffect, useState, useRef } from "react";

const App = () => {
    const [arr, setArr] = useState([]);
    const hasInitialized = useRef(false);

    useEffect(() => {
        if (!hasInitialized.current) {
            setArr(prev => [...prev, 1]);
            hasInitialized.current = true;
        }
    }, []);

    return (
        <div>
            {arr.map((value, index) => (
                <p key={index}>{value}</p>
            ))}
        </div>
    );
};

export default App;

但记住，这只是为了优化开发模式下的体验，生产环境完全不需要这个处理。

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