ESLint exhausive-deps：忽略来自 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])

我违反了 ESLintexhaustive-deps规则：

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

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

useRefOf我如何告诉 ESLint像引用一样对待useRef并容忍它不在依赖数组中？

Answer 1

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

}, [doSomeGreatStuff])

到

}, [doSomeGreatStuff, someValueRef])