reactjs - ESLint 详尽-deps : ignore value that came from a ref

Question

我有一个实用函数来在引用中存储不断变化的值:

export function useRefOf<T>(value: T) {
  const ref = useRef(value);

  useEffect(() => {
    ref.current = value;
  }, [value]);

  return ref;
}

但是，当我在效果中使用它时，我不想在值更改时重新渲染:

const someValueRef = useRefOf(someValue);

useEffect(() => {
  doSomeGreatStuff(someValueRef.current);
}, [doSomeGreatStuff])

我打破了 ESLint exhaustive-deps 规则:

React Hook useEffect has a missing dependency: 'someValueRef'. Either include it or remove the dependency array

我知道如果我使用常规的 useRef 而不是我的 useRefOf，ESLint 不会提示。

如何告诉 ESLint 将 useRefOf 视为来自 useRef 的引用，并容忍它不在依赖项数组中？

Answer 1

通常，使用exhaustive-deps，在不忽略规则的情况下解决问题的“干净”方法是将值添加到依赖项数组中，即使这样做实际上并没有完成任何事情。这种方法可以用在这里。 ref 是稳定的；给定组件的 useRef 返回的值每次都是同一个对象。因此，如果您进行更改，您的代码将执行与现在相同的操作

}, [doSomeGreatStuff])

至

}, [doSomeGreatStuff, someValueRef])