React hook - useStatefulRef

useStatefulRef.ts

import { useState } from "react";

/**
 * As an API it's the same useRef,
 * but it uses useState under the hood.
 *
 * Used to watch the ref changing between re-renders.
 *
 * Source: https://non-traditional.dev/creating-a-stateful-ref-object-in-react-fcd56d9dea58
 */
export function useStatefulRef<T extends unknown>(initialVal: T | undefined = undefined) {
  let [currentVal, setCurrentVal] = useState<T | undefined>(initialVal);

  const [statefulRef] = useState({
    get current() {
      return initialVal;
    },
    set current(value) {},
  });

  Object.defineProperty(statefulRef, "current", {
    get: () => currentVal,
    set: (newValue) => {
      if (!Object.is(currentVal, newValue)) {
        currentVal = newValue;
        setCurrentVal(newValue);
      }
    },
  });

  return statefulRef;
}