使用useRef避免组件重挂载时重复执行useEffect

问题原因 #

1. 判断逻辑位置错误：如果在组件渲染阶段（函数体直接编写、JSX代码中）基于isMounted.current做分支判断，组件每次渲染都会执行这段逻辑。哪怕useEffect仅在首次挂载执行，组件后续因状态更新、父组件传参变化引发的重新渲染，都会反复触发else分支。
2. useRef生命周期理解偏差：组件卸载后，对应的useRef对象会被销毁，重新挂载时会创建新的isMounted ref，初始值为false。若else分支逻辑不在useEffect内部，而是在渲染周期中，首次渲染时isMounted.current仍为false，就会触发else，后续每次渲染也可能因其他原因再次进入该分支。
3. 异步场景判断时机错误：如果是异步操作（如请求数据）后判断组件是否挂载，若把判断逻辑写在异步回调外，或未在清理函数中正确标记isMounted为false，可能导致旧异步回调触发后进入else分支。

解决办法 #

1. 将首次执行逻辑严格限制在空依赖useEffect内部 #

空依赖的useEffect回调仅在组件首次挂载时执行一次，卸载时执行清理函数。不要在渲染阶段（函数体、JSX）基于isMounted做分支判断，除非是为了处理异步更新已卸载组件的场景。

正确示例代码：

import { useRef, useEffect } from 'react';

function Cart() {
  const isMounted = useRef(false);

  useEffect(() => {
    // 仅首次挂载执行的初始化逻辑
    isMounted.current = true;
    console.log('执行首次挂载初始化');

    // 组件卸载时的清理逻辑
    return () => {
      isMounted.current = false;
    };
  }, []); // 空依赖确保仅首次挂载执行

  return (
    <div className="cart">
      {/* 组件渲染内容 */}
    </div>
  );
}

2. 异步场景下正确判断组件挂载状态 #

如果异步操作完成后需要判断组件是否仍挂载（避免更新已卸载组件的状态），需把isMounted的判断放在异步回调内部，同时确保清理函数正确标记状态：

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

function Cart() {
  const isMounted = useRef(false);
  const [cartData, setCartData] = useState(null);

  useEffect(() => {
    isMounted.current = true;
    // 模拟异步请求购物车数据
    fetch('/api/cart')
      .then(res => res.json())
      .then(data => {
        // 仅当组件挂载时才更新状态
        if (isMounted.current) {
          setCartData(data);
        } else {
          console.log('组件已卸载，跳过状态更新');
        }
      });

    return () => {
      isMounted.current = false;
    };
  }, []);

  return (
    <div className="cart">
      {cartData ? (
        <ul>{cartData.items.map(item => <li key={item.id}>{item.name}</li>)}</ul>
      ) : (
        <p>加载中...</p>
      )}
    </div>
  );
}

3. 移除渲染阶段的isMounted分支判断 #

如果else分支是在渲染函数里触发的，直接删除这段逻辑。渲染函数应仅负责根据当前状态渲染UI，无需依赖isMounted做分支——组件挂载时自然会渲染，卸载时不会执行渲染逻辑。

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