A reducer hook which calls the provided reducer function synchronously and returns the updated state from the dispatch.

useSynchronousReducer.tsx

import { useState, useCallback, useRef } from 'react';

export const useSynchronousReducer = <S, A>(
  reducer: (s: S, a: A) => S,
  initialState: S
) => {
  const stateRef = useRef(initialState);
  const [state, setState] = useState<S>(stateRef.current);

  const dispatch = useCallback<(a: A) => S>((action) => {
    stateRef.current = reducer(stateRef.current, action);
    setState(stateRef.current);
    return stateRef.current;
  }, []);

  return [state, dispatch] as const;
};