React18开发环境热重载时useEffect重复触发问题求助

针对你遇到的热重载导致初始化逻辑重复执行、store数据累加的问题，给你几个实用的解决思路：

方案一：基于Redux状态判断是否需要执行初始化 #

核心思路是：只有当store中没有初始数据时，才触发异步请求。这样即使热重载组件重新挂载，也会先检查状态，避免重复执行。

import { useSelector, useDispatch } from 'react-redux';

const App = () => {
  const dispatch = useDispatch();
  // 替换成你store中实际存储初始单词的字段路径
  const existingInitialTerms = useSelector(state => state.yourSlice.initialTerms);

  useEffect(() => {
    if (!existingInitialTerms) {
      const defaultTerms = defaultTuples[~~(Math.random() * defaultTuples.length)];
      dispatch(getData({ terms: defaultTerms }));
    }
  }, [dispatch, existingInitialTerms]);

  // ...组件其他逻辑
};

这个方案最可靠，完全依赖store状态，不管是热重载还是其他场景，都能保证初始化逻辑仅在需要时执行。

方案二：使用模块级标志位标记初始化状态 #

在组件所在模块定义一个全局变量，标记是否已经完成初始化。React Fast Refresh这类热重载工具通常会保留模块级变量的状态，能有效避免重复执行：

import { useDispatch } from 'react-redux';

// 模块级变量，标记初始化状态
let hasInitialized = false;

const App = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    if (!hasInitialized) {
      const defaultTerms = defaultTuples[~~(Math.random() * defaultTuples.length)];
      dispatch(getData({ terms: defaultTerms }));
      hasInitialized = true;
    }
  }, [dispatch]);

  // ...组件其他逻辑
};

注意：如果你的热重载工具会完全重置模块（比如旧版webpack热替换），这个方案可能失效，此时优先选方案一。

方案三：配合环境变量+本地存储控制开发行为 #

如果只想在开发阶段避免重复触发，可以结合环境变量和本地存储做临时标记：

import { useDispatch } from 'react-redux';

const App = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    if (process.env.NODE_ENV === 'development') {
      const hasRun = localStorage.getItem('app_init_done');
      if (!hasRun) {
        const defaultTerms = defaultTuples[~~(Math.random() * defaultTuples.length)];
        dispatch(getData({ terms: defaultTerms }));
        localStorage.setItem('app_init_done', 'true');
      }
    } else {
      // 生产环境直接执行一次
      const defaultTerms = defaultTuples[~~(Math.random() * defaultTuples.length)];
      dispatch(getData({ terms: defaultTerms }));
    }
  }, [dispatch]);

  // 可选：页面刷新时清除标记，保证每次刷新都重新初始化
  useEffect(() => {
    return () => {
      if (process.env.NODE_ENV === 'development') {
        localStorage.removeItem('app_init_done');
      }
    };
  }, []);

  // ...组件其他逻辑
};

这个方案适合开发阶段临时使用，需要注意本地存储的持久化特性，若要重启开发服务后重新初始化，需手动清除对应localStorage项。

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