useStateRef hook

use_state_ref.ts

import type { Dispatch, SetStateAction } from 'react';
import { useCallback, useRef, useState } from 'react';

/** The returned value of a useRef hook, but marked as readonly. */
type ReadOnlyRef<T> = {
  readonly current: T;
};

/** The return type of useStateRef. */
type StateRefResult<S> = [S, Dispatch<SetStateAction<S>>, ReadOnlyRef<S>];

/**
 * A variant of useState that also returns a reference to the latest value.
 * useState updates are batched, so re-renders may see stale values. If you need
 * the latest value, use the last tuple element, the ReadOnlyRef to the latest
 * state.
 * https://stackoverflow.com/a/63039797/30900
 */
export function useStateRef<S = undefined>(): StateRefResult<S | undefined>;
export function useStateRef<S>(initialState: S): StateRefResult<S>;
export function useStateRef<S>(initialState?: S): StateRefResult<S> {
  const [state, setState] = useState(initialState);
  const ref = useRef(state);

  const dispatch: Dispatch<SetStateAction<S>> = useCallback((setter) => {
    ref.current = setter instanceof Function ? setter(ref.current as S) : setter;
    setState(ref.current);
  }, []);

  return [state, dispatch, ref] as StateRefResult<S>;
}