依存关系变更时如何重设参考

Question

我正在编写一个使用useRef的钩子，当传递给钩子的deps发生变化时，我想将ref重置为其初始值（类似于useState的行为）。不幸的是，useRef没有“ deps”参数。

为了更好地了解我要实现的目标，我附上了自定义钩子。输入特定的按键序列（即konami代码）时，我想触发回调。我想在refIndex，code或handler更改时将deps重置为0。不能使用useState，因为每次设置状态时都会触发重新渲染。

function useKeySequence(code, handler, deps) {
  const refIndex = useRef(0);

  const onKeyUpCallback = useCallback((e) => {
    const onKeyUp = ({ key }) => {
      if (refIndex.current === codes.length - 1) {
        handler();
      }

      if (
        key != null &&
        codes[refIndex.current] != null &&
        key.toLowerCase() === codes[refIndex.current].toLowerCase()
      ) {
        refIndex.current++;
      } else {
        refIndex.current = 0;
      }
    };

    onKeyUp(e);
  }, [codes, handler, ...deps]);

  // Add event listeners
  useEffect(() => {
    window.addEventListener("keyup", onKeyUpCallback);
    return () => {
      window.removeEventListener("keyup", onKeyUpCallback);
    };
  }, [onKeyUpCallback]);
}