React中使用IntersectionObserver时，是否必须调用unobserve()？

好问题！其实这里确实应该显式调用unobserve()，原因主要有这几点：

• 避免潜在的内存泄漏：IntersectionObserver实例会持有对目标DOM元素的引用。如果组件卸载后，observer还在持续观察这个元素，浏览器的垃圾回收机制可能无法正常回收该元素及其关联资源。虽然你当前的性能分析没发现问题，但在频繁挂载/卸载组件的场景（比如列表项、路由切换）下，这类未清理的观察者积累多了，很可能会引发内存泄漏问题。
• 遵循React Effect的最佳实践：React设计Effect钩子的核心逻辑之一，就是要求开发者清理所有创建的外部副作用——不管是事件监听、定时器还是观察者。保持这个习惯能让组件行为更可预测，避免后续维护时出现难以排查的隐性bug。
• 防止意外的回调触发：如果组件已经卸载，但observer仍在运行，万一目标元素后续被其他组件复用或者重新出现在视口中，你的doWork回调可能会被意外触发，导致尝试操作已经卸载的组件状态，进而引发Cannot read properties of null这类报错。

这里给你调整后的规范代码示例：

const myRef = React.useRef(null);
React.useLayoutEffect(() => {
  const observer = new IntersectionObserver(
    doWork,
    { rootMargin: "0px 0px 0px 0px" }
  );
  const targetElement = myRef.current;
  
  if (targetElement) {
    observer.observe(targetElement);
  }

  // 清理函数：组件卸载或依赖更新时执行
  return () => {
    if (targetElement) {
      observer.unobserve(targetElement);
      // 如果不需要这个observer再观察任何元素，也可以直接调用disconnect彻底终止
      // observer.disconnect();
    }
  };
}, [doWork]) // 注意：若doWork是组件内定义的函数，建议用useCallback包裹并加入依赖数组

你当前没发现负面影响，大概率是因为场景比较简单，组件生命周期相对单一。但在长期维护的大型应用中，这种细节处理能有效降低后期的维护成本。

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