点击MovieBlock中<Link>触发延迟跳转，useEffect异常执行原因咨询

核心原因 #

1. useEffect清理函数的执行机制：React组件卸载时，无论useEffect内部的inputChanged条件判断是否满足，只要该effect曾经执行过，组件卸载阶段就会触发对应的清理函数。这是React的内置机制，和effect的触发条件无关——你看到跳转后打印"cleaned"，就是当前页面组件卸载时执行清理函数的结果。

2. 跳转延迟的根源：
   大概率是你的useEffect中设置了定时器（如setTimeout），且存在以下问题：

   • 定时器未在清理函数中被正确清除，组件卸载后定时器仍在运行，其回调逻辑可能让你产生“跳转延迟”的感知；
   • useEffect的依赖项设置不合理，包含了点击Link时会变化的变量（比如路由参数、组件内部临时状态），导致点击跳转时useEffect重新执行并启动新的定时器，而定时器的2秒延迟正好和你感知到的跳转延迟时间吻合。

修复步骤 #

1. 修正useEffect的依赖项

确保useEffect仅在inputChanged变化时触发，剔除无关依赖，避免点击Link时触发不必要的effect执行：

useEffect(() => {
  // 你的业务逻辑
}, [inputChanged]); // 仅保留inputChanged作为依赖

2. 确保定时器被全局清除

使用useRef保存定时器ID，在清理函数中统一清除，无论inputChanged是否满足条件：

import { useEffect, useRef } from 'react';

// ...

const timerRef = useRef(null);

useEffect(() => {
  if (inputChanged) {
    timerRef.current = setTimeout(() => {
      // 你的业务逻辑，比如搜索请求、状态更新等
    }, 2000);
  }

  // 组件卸载或effect重新执行时，强制清除定时器
  return () => {
    if (timerRef.current) {
      clearTimeout(timerRef.current);
      timerRef.current = null;
    }
    console.log("cleaned");
  };
}, [inputChanged]);

这样无论组件何时卸载，都能确保定时器被清除，避免残留的异步逻辑干扰页面跳转。

3. 排查Link的额外绑定逻辑

如果上述操作后仍有延迟，检查MovieBlock.js中的Link是否绑定了额外的点击事件处理函数，是否存在同步耗时操作或未正确处理的异步逻辑，这些都可能导致跳转延迟。

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