React Global State Demo

state.ts

import { useState } from 'react';

type GlobalState<T> = { value: T };

const setStateMap = new Map<GlobalState<any>, Set<Function>>();

export function useGlobalState<T>(stateObj: GlobalState<T>) {
  const setStateFuncs = setStateMap.get(stateObj) ?? new Set();
  setStateMap.set(stateObj, setStateFuncs);

  const [_, setState] = useState(Symbol()); // refresher
  setStateFuncs.add(setState);

  const setGlobalState = (newVal: T) => {
    stateObj.value = newVal;
    // refresh all listening component
    for (const setStateFunc of setStateFuncs) {
      setStateFunc(Symbol());
    }
  };

  return [stateObj.value, setGlobalState] as const;
}

export const globalCount: GlobalState<number> = { value: 0 };
export const globalName: GlobalState<string> = { value: 'John' };
export const globalAge: GlobalState<number> = { value: 30 };