使用React+Intersection Observer实现滑块的useEffect依赖异常问题

问题根因 #

你遇到的问题本质是两个常见的React Hooks使用误区：

1. 组件内定义的普通函数每次重渲染都会生成新的引用，直接加入useEffect依赖会导致effect频繁触发，Observer实例反复销毁重建，无法正常监听滚动交叉状态
2. 原有代码中判断activeSlide === "NaN"的逻辑是错误的，Number()转换失败返回的是NaN原始值，不是字符串类型，会导致异常的id值无法被正常拦截

修复步骤 #

1. 稳定父组件传递的回调函数引用

给Slider组件内的setSlide、moveToSlide加上useCallback包裹，避免每次重渲染生成新的函数引用：

const Slider = ({images}) => { 
  const [currentSlide, SetCurrentSlide] = React.useState(0);
  
  const setSlide = React.useCallback((id) => {
    SetCurrentSlide(id);
  }, []);
  
  const moveToSlide = React.useCallback((id) => {
    if(id > -1 && id < images.length) {
      SetCurrentSlide(id);
    }
  }, [images]);

  // 其余返回逻辑保持不变
}

2. 稳定SliderWrapper内的回调函数，修正NaN判断逻辑

给handleSetSlide、handleIntersection也加上useCallback包裹，同时修正异常id的判断逻辑，可额外加重复状态判断减少无效更新：

const SliderWrapper = ({items, setSlide, currentSlide}) => {
  const containerRef = React.useRef(null);
  // 无用的useInView代码可以直接删除，现有逻辑未用到相关返回值
  
  const handleSetSlide = React.useCallback((id) => {
    setSlide(id);
  }, [setSlide]); 
  
  const handleIntersection = React.useCallback((entries) => {
    const [entry] = entries;
    const activeSlide = Number(entry.target.dataset.slide);
    // 修正NaN判断逻辑，Number转换失败返回的是NaN原始值，不是字符串
    if (!entry.isIntersecting || Number.isNaN(activeSlide)) return;
    // 可选优化：如果当前id和已经激活的id一致，不重复更新状态
    if (activeSlide === currentSlide) return;
    handleSetSlide(activeSlide);
  }, [handleSetSlide, currentSlide]);

  // 其余返回逻辑保持不变
}

3. 补全useEffect依赖，添加空值防御

调整useEffect的依赖数组，同时添加容器DOM的空值判断避免组件未挂载完成时报错：

React.useEffect(() => {
  const container = containerRef.current;
  // 空值防御，避免DOM未渲染完成时报空指针错误
  if (!container) return;
  const observer = new IntersectionObserver(
    handleIntersection,
    {
      root: container,
      threshold: 0.45
    }
  );
  Array.from(container.children).forEach((item) => {
    observer.observe(item);
  });
  return () => {
    observer.disconnect();
  }
// 补全所有必要依赖，此时所有依赖引用都是稳定的，不会频繁触发effect执行
}, [items, handleIntersection]);

做完以上修改后，eslint的依赖警告会完全消失，同时Intersection Observer可以正常监听滚动状态，点击导航和滚动两种交互不会互相冲突。

内容的提问来源于stack exchange，提问作者jan-wagenaar