late-bound React hook callbacks, avoiding subtree re-renders when event callback deps change

gistfile1.txt

function useWeakRef<T>(value: T): React.MutableRefObject<T> {
  const ref = useRef(value);
  useEffect(() => {
    ref.current = value;
  }, [value]);
  return ref;
}

function useByrefCallback<Args extends unknown[], Result>(
  callback: (...args: Args) => Result,
): (...args: Args) => Result {
  const callbackRef = useWeakRef(callback);
  return useCallback(
    (...args: Args) => {
      return callbackRef.current(...args);
    },
    [callbackRef],
  );
}

function MyComponent({handleFinish}: {handleFinish: () => void}) {
  const handleFinish3 = useByrefCallback(() => {
    analytics.finishLesson(/* etc */);
    handleFinish();
  })
}