Simple function that returns a global state hook.

useGlobalState.ts

import { useEffect, useState } from 'preact/hooks';

type StateSetter<T> = Partial<T> | ((currentState: T) => T);

export const createGlobalState = <T>(init: T) => {
  const store = {
    state: init,

    get: (): Readonly<T> => store.state,

    setState: (nextState: StateSetter<T>) => {
      if (typeof nextState === 'function') {
        store.state = nextState(store.state);
      } else {
        store.state = {
          ...store.state,
          ...nextState,
        };
      }

      store.setters.forEach((setter) => setter(store.state));
    },

    setters: [] as Array<(state: T) => void>,
  };

  const useGlobalState = () => {
    const [globalState, stateSetter] = useState(store.state);

    useEffect(() => {
      store.setters = store.setters.concat(stateSetter);

      return () => {
        store.setters = store.setters.filter((setter) => setter !== stateSetter);
      };
    }, []);

    return [globalState, store.setState] as const;
  };

  return { useGlobalState, get: store.get, merge: store.setState };
};