React自定义useRequest Hook偶发内存泄漏问题排查

• AbortController 中断请求后未过滤异常分支，导致已卸载组件被更新
  调用abort()并不会让fetch请求的Promise静默结束，而是会抛出AbortError进入catch回调。当前useRequest没有对这个主动触发的中断错误做判断，会在catch里直接执行setError、setIsLoading。当组件因为路由切换、条件渲染从React树移除后，这些针对已销毁组件实例的状态操作，就会触发内存泄漏警告。
• 高阶组件定义在渲染作用域内部，引发组件反复卸载重建
  Item组件中的const RowComp = withRow(Row)写在了函数组件的渲染逻辑里，每次Item重新渲染，都会生成一个全新的RowComp引用。React做diff时只要发现组件引用变化，就会销毁旧的组件实例（包括关联的Hook状态、DOM），再挂载全新的组件实例。这就导致HOC绑定的useRequest会不断经历挂载-卸载循环，很多还在pending的请求刚发出，组件就已经被下一次渲染的新实例替换，触发旧实例的状态更新，这也是绝大多数泄漏报错来自HOC的直接原因。
• 缺少组件挂载态校验，无差别执行状态更新
  当前useRequest的effect清理逻辑只做了请求中断，没有维护组件挂载状态的标记。哪怕请求正常返回走到then分支时组件已经卸载，对应的setApiData、setIsLoading操作仍然会直接执行，没有前置拦截。

• 调整useRequest内部逻辑，拦截无效状态更新
  1. 在effect内部维护挂载标记，所有状态更新执行前先判断组件是否仍处于挂载状态
  2. 在catch分支识别AbortError，这类主动中断的异常不需要更新错误状态
     核心代码修正示例：

  React.useEffect(() => {
    const abortController = new AbortController();
    let isMounted = true;
  
    fetch(url, {
      headers: headers,
      signal: abortController.signal,
    })
      .then((res) => res.json())
      .then((data) => {
        if (!isMounted) return;
        setIsLoading(false);
        if (data.status_message) {
          throw Error(data.status_message);
        }
        setApiData(data);
      })
      .catch((err) => {
        if (!isMounted) return;
        if (err.name === 'AbortError') return; // 跳过主动中断的异常
        setError(err);
        setIsLoading(false);
      });
  
    return function cleanup() {
      isMounted = false;
      abortController.abort();
    };
  }, [url]);
  

• 调整高阶组件的定义位置
  把withRow(Row)的结果提到Item组件外部的模块作用域定义，保证组件引用在多次渲染间保持稳定，避免反复卸载重建：

  // 移至组件外部，保证引用稳定
  const RowComp = withRow(Row);
  
  function Item() {
    const { id } = useParams();
    const { path } = useRouteMatch();
    const type = path.split("/")[1];
  
    // 原有逻辑省略，直接使用稳定的RowComp即可
    return <RowComp title="Cast" url={request.getCast(type, id)} />
  }
  

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