React自定义Hook中IntersectionObserver的useEffect警告处理问询

当前解决方案是否正确？ #

不正确。你用useState存储observerRefValue但从未调用setObserverRefValue更新它，导致observerRefValue始终是初始值null，清理函数里的unobserve操作根本不会生效，等于没做资源清理，可能引发内存泄漏。

更优的解决方法 #

按照ESLint的提示，在useEffect内部将containerRef.current赋值给一个局部变量，这个变量会被捕获到清理函数的闭包中，确保清理时使用的是当前effect执行时的DOM元素引用，不会因为ref后续变化而失效。同时优化细节如下：

• 用useCallback包裹回调函数，明确依赖项，避免不必要的effect重执行
• 移除containerRef作为useEffect的依赖（ref对象本身稳定，且current变化不会触发effect）
• 处理空值边界，避免调用observe/unobserve时出现报错

如何消除未使用setObserverRefValue的警告？ #

直接删掉那个没用的useState声明即可——你根本不需要用状态存储DOM元素引用，局部变量就能完美解决问题。

修正后的完整代码 #

import { useRef, useState, useEffect, useCallback } from 'react';

const useElementOnScreen = <T extends IntersectionObserverInit>(options: T): [React.MutableRefObject<HTMLDivElement | null>, boolean] => {
    const containerRef = useRef<HTMLDivElement | null>(null);
    const [isVisible, setIsVisible] = useState(false);

    // 用useCallback包裹回调，锁定依赖避免不必要重渲染
    const callbackFunction = useCallback((entries: IntersectionObserverEntry[]) => {
        const [entry] = entries;
        setIsVisible(entry.isIntersecting);
    }, [setIsVisible]);

    useEffect(() => {
        const observer = new IntersectionObserver(callbackFunction, options);
        // 在effect内部捕获当前的DOM元素引用
        const currentElement = containerRef.current;

        if (currentElement) {
            observer.observe(currentElement);
        }

        // 清理函数使用捕获到的局部变量，确保操作的是之前观察的元素
        return () => {
            if (currentElement) {
                observer.unobserve(currentElement);
            }
        };
    }, [callbackFunction, options]);

    return [containerRef, isVisible];
};

关键说明 #

1. 局部变量currentElement：effect执行时捕获当前的containerRef.current，清理函数的闭包会保留这个值，确保卸载或effect更新时，能正确取消对之前元素的观察，不会因为ref后续变化（比如组件卸载后current变为null）而出错。
2. useCallback优化：避免每次组件render都创建新的回调函数，导致effect不必要地重新执行，同时符合ESLint对依赖项的检查要求。
3. 依赖数组精简：只保留callbackFunction和options，containerRef不需要加入——因为ref对象本身是稳定的，且我们已经通过局部变量捕获了当前的current值。

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