React state that can be updated imperatively

react-imperative-state.ts

import { useEffect, useState } from 'react';

export const createImperativeState = <State>(
  initialState: State | (() => State)
) => {
  let listeners: Array<(state: State) => void> = [];

  let memoryState: State =
    initialState instanceof Function ? initialState() : initialState;

  function updateState(newState: State | ((prevState: State) => State)) {
    memoryState =
      newState instanceof Function ? newState(memoryState) : newState;

    for (const listener of listeners) {
      listener(memoryState);
    }
  }

  function useStore(): State {
    const [state, setState] = useState<State>(memoryState);

    useEffect(() => {
      listeners.push(setState);

      return () => {
        const index = listeners.indexOf(setState);
        if (index > -1) {
          listeners.splice(index, 1);
        }
      };
    }, [setState]);

    return state;
  }

  return { useStore, updateState };
};