ReactJS hook for passing state and a setter function with ability of getting callback for each setter call.

useStateCallback.ts

import {useRef, useCallback, useEffect, useState} from 'react';
import isFunction from 'lodash.isfunction';
import type {SetStateAction} from 'react';

type CallbackGeneric<S> = (newState: S) => void;
export type SetStateCallbackGeneric<S> = (
  x: SetStateAction<S>,
  cb?: CallbackGeneric<S>,
) => void;

const useStateCallback = <T>(
  initialState?: T,
): [T, SetStateCallbackGeneric<T>] => {
  const [state, setState] = useState(initialState);
  const cbRef = useRef<any>();

  const setStateCallback: SetStateCallbackGeneric<T> = useCallback(
    (newState, cb) => {
      cbRef.current = cb;
      setState(newState as T);
    },
    [],
  );

  useEffect(() => {
    if (isFunction(cbRef?.current)) {
      cbRef?.current(state);
      cbRef.current = undefined;
    }
  }, [state]);

  return [state as T, setStateCallback];
};

export {useStateCallback};