StrictMode导致useEffect内useState异常的原因及优化方案

问题原因 #

确实是StrictMode的双重渲染导致的。在开发模式下，StrictMode会刻意重复执行部分操作来检测潜在bug，包括组件渲染函数、useEffect回调、状态更新的函数式回调。

你的代码中初始isLoading为true：

1. 第一次执行useEffect副作用，调用setIsLoading(prev => !prev)将状态改为false
2. StrictMode触发第二次副作用执行，此时prevState已变为false，取反后状态又变回true
   最终状态停留在true，导致一直显示加载中。

为什么直接用setIsLoading(false)没问题 #

固定值更新不依赖之前的状态，不管StrictMode执行几次副作用，都会把isLoading设为false，两次执行后状态最终还是false，因此能正常显示加载完成。

最优实现方式 #

方式一：直接使用固定值更新（推荐） #

这是最简洁直观的方案，因为加载完成后状态必然是false，无需依赖之前的状态：

import { useEffect, useState } from "react";

export default function App() {
  const [isLoading, setIsLoading] = useState<boolean>(true);

  useEffect(() => {
    const getData = async () => {
      // 数据请求逻辑
      setIsLoading(false);
    };
    getData();
  }, []);

  return (
    <div className="App">
      {isLoading ? <div>Loading...</div> : <div>Data has been loaded</div>}
    </div>
  );
}

方式二：用标记避免重复执行（适合复杂状态逻辑） #

如果确实需要依赖之前的状态做函数式更新，可以在副作用内添加执行标记，防止重复触发状态变更：

import { useEffect, useState } from "react";

export default function App() {
  const [isLoading, setIsLoading] = useState<boolean>(true);

  useEffect(() => {
    let hasRun = false;
    const getData = async () => {
      if (hasRun) return;
      // 数据请求逻辑
      setIsLoading(prevState => !prevState);
      hasRun = true;
    };
    getData();
  }, []);

  return (
    <div className="App">
      {isLoading ? <div>Loading...</div> : <div>Data has been loaded</div>}
    </div>
  );
}

方式三：使用useRef跟踪执行状态 #

useRef的内容不会触发组件重渲染，适合做这种持久化标记：

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

export default function App() {
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const hasLoaded = useRef(false);

  useEffect(() => {
    const getData = async () => {
      if (hasLoaded.current) return;
      // 数据请求逻辑
      setIsLoading(false);
      hasLoaded.current = true;
    };
    getData();
  }, []);

  return (
    <div className="App">
      {isLoading ? <div>Loading...</div> : <div>Data has been loaded</div>}
    </div>
  );
}

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