当事件处理函数在useEffect外部时，如何清理EventListener？

问题背景 #

你看到的常见写法是将事件处理函数定义在useEffect内部，确保清理时能引用到同一个函数：

useEffect(() => {
  function updateSize(){
    setSize([window.innerWidth, window.innerHeight]);
  };

  window.addEventListener("resize", updateSize);
  updateSize();

  return () => window.removeEventListener("resize", updateSize);
}, []);

而你尝试将处理函数定义在useEffect外部，监听功能正常，但不确定这种写法是否能正确清理监听：

const Component = () => {
  const [size, setSize] = useState([0, 0]);

  const updateSize = () => {
    setSize([window.innerWidth, window.innerHeight]);
  };

  useEffect(() => {
    window.addEventListener("resize", updateSize);
    updateSize();
    // 注意：你的代码存在语法错误，完整清理逻辑见注释
    // return () => window.removeEventListener("resize", updateSize);
    return () => window.remove
  }, []);

  return <>...</>
}

核心结论 #

只要添加监听和移除监听时使用的是同一个函数引用，不管处理函数定义在useEffect内部还是外部，都能正确清理EventListener。但需要注意两种场景下的细节：

1. 未用useCallback缓存处理函数的情况

函数组件每次重新渲染时，都会重新定义updateSize，生成新的函数引用。但因为你的useEffect依赖数组为空（[]），它只会在组件挂载时执行一次：

• 挂载时添加的是第一次渲染时的updateSize引用
• 清理函数是闭包，捕获的也是这个第一次的updateSize引用
• 组件卸载时，能准确移除对应的监听，清理逻辑是有效的

但存在隐患：如果updateSize依赖了组件的状态/ props（比如用到某个props.width），旧的updateSize会捕获渲染时的旧值，导致后续触发监听时逻辑错误（比如使用了过期的props）。

2. 用useCallback缓存处理函数的情况

推荐用useCallback缓存处理函数，确保其引用在组件生命周期内稳定：

const Component = () => {
  const [size, setSize] = useState([0, 0]);

  // 用useCallback缓存，依赖数组为空时，引用始终不变
  const updateSize = useCallback(() => {
    setSize([window.innerWidth, window.innerHeight]);
  }, []);

  useEffect(() => {
    window.addEventListener("resize", updateSize);
    updateSize();
    return () => window.removeEventListener("resize", updateSize);
  }, [updateSize]); // 依赖添加updateSize，确保引用变化时重新绑定

  return <>...</>
}

这种方式下：

• updateSize的引用稳定，添加和清理用的是同一个函数，清理绝对有效
• 如果updateSize有依赖（比如某个props），只需将依赖加入useCallback的依赖数组，useEffect也会在依赖变化时重新绑定监听，避免闭包问题

你的代码错误修正 #

你提供的外部写法中，清理函数没有写完，正确的清理逻辑应该是：

return () => window.removeEventListener("resize", updateSize);

如果不补全这部分，组件卸载时不会执行任何清理操作，会导致内存泄漏。

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