Sometimes you want both useRef's never-stale guarantee and useState's rerender-on-change functionality. This hook delivers a ref & a setter that triggers rerender on change.

useRefWithRerender.ts

function useRefWithRerender<T>(initialState: T): [MutableRefObject<T>, (value: T) => void] {
  const ref = useRef(initialState);
  const [, setState] = useState(true);

  const setter = useCallback((value: T) => {
    if (ref.current === value) return;
    ref.current = value;
    setState((n) => !n);
  }, []);

  return [ref, setter];
}