是否可以通过 useCallback 避免自定义 React Hook 上的“eslint(react-hooks/exhaustive-deps)”错误？

Question

使用以下自定义 React Hook 与 IntersectionObserver 进行交互：

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

type IntersectionObserverResult = [(node: Element | null) => void, IntersectionObserverEntry?];

function useIntersectionObserver(options: IntersectionObserverInit): IntersectionObserverResult {
    const intersectionObserver = useRef<IntersectionObserver>();

    const [entry, setEntry] = useState<IntersectionObserverEntry>();

    const ref = useCallback(
        (node) => {
            if (intersectionObserver.current) {
                console.log('[useInterSectionObserver] disconnect(????)');
                intersectionObserver.current.disconnect();
            }

            if (node) {
                intersectionObserver.current = new IntersectionObserver((entries) => {
                    console.log('[useInterSectionObserver] callback(????)');
                    console.log(entries[0]);

                    setEntry(entries[0]);
                }, options);

                console.log('[useInterSectionObserver] observe(????)');
                intersectionObserver.current.observe(node);
            }
        },
        [options.root, options.rootMargin, options.threshold]
    );

    return [ref, entry];
}

export { useIntersectionObserver };

ESLint 抱怨：

React Hook useCallback 缺少一个依赖项：'options'。要么包含它，要么移除依赖数组。

如果我用 [options] 替换依赖项数组，ESLint 不再抱怨，但现在有一个更大的问题，渲染无限循环。

在不出现eslint(react-hooks/exhaustive-deps) 错误的情况下，实现这个自定义 React Hook 的正确方法是什么？

Answer 1

解决此问题的方法是从 options 解构您需要的属性并将它们设置在依赖数组中。这样你就不需要options，并且只有当这三个值发生变化时才会调用钩子。

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

type IntersectionObserverResult = [(node: Element | null) => void, IntersectionObserverEntry?];

function useIntersectionObserver(options: IntersectionObserverInit): IntersectionObserverResult {
    const intersectionObserver = useRef<IntersectionObserver>();
    const [entry, setEntry] = useState<IntersectionObserverEntry>();
    const { root, rootMargin, threshold } = options;

    const ref = useCallback(
        (node) => {
            if (intersectionObserver.current) {
                console.log('[useInterSectionObserver] disconnect(?)');
                intersectionObserver.current.disconnect();
            }

            if (node) {
                intersectionObserver.current = new IntersectionObserver((entries) => {
                    console.log('[useInterSectionObserver] callback(?)');
                    console.log(entries[0]);

                    setEntry(entries[0]);
                }, options);

                console.log('[useInterSectionObserver] observe(?)');
                intersectionObserver.current.observe(node);
            }
        },
        [root, rootMargin, threshold]
    );

    return [ref, entry];
}

export { useIntersectionObserver };

Answer 2

您应该始终在 dep 数组中提供所有必要的值，以防止它使用以前的缓存函数和陈旧的值。解决您的情况的一种选择是记下 options 对象，以便在其值更改时仅传递一个新对象，而不是在每次重新渲染时传递：

// in parent
// this passes a new obj on every re-render
const [ref, entry] = useIntersectionObserver({ root, rootMargin, threshold }); 

// this will only pass a new obj if the deps change
const options = useMemo(() => ({ root, rootMargin, threshold }), [root, rootMargin, threshold]);
const [ref, entry] = useIntersectionObserver(options);