React组件卸载时，自定义Hook中的useEffect清理函数是否触发？

核心结论 #

组件卸载时，自定义Hook内部useEffect的清理函数会被自动触发，完全可以把定时器清理逻辑移到useBanner内部，不用在每个使用组件里重复编写清理代码。

背后的执行机制 #

• 自定义Hook本质是复用组件逻辑的函数，它的代码会「注入」到调用它的组件内部执行，和组件自身的useEffect属于同一个上下文。
• 当组件调用useBanner时，Hook里的useEffect会被注册到该组件的副作用队列中，和组件自己写的useEffect没有本质区别。
• 组件卸载时，React会遍历该组件所有注册的副作用，执行对应的清理函数——包括自定义Hook里useEffect返回的清理函数。

示例代码 #

把清理逻辑移到Hook内部的实现：

import { useEffect, useState } from 'react';

function useBanner() {
  const [showBanner, setShowBanner] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => {
      setShowBanner(true);
    }, 3000);

    // 组件卸载时该清理函数会自动执行
    return () => {
      clearTimeout(timer);
    };
  }, []);

  return showBanner;
}

这样任何组件调用useBanner时，都无需手动处理定时器清理，组件卸载时React会自动触发Hook内的清理逻辑，从根源避免内存泄漏问题。

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