React hook: useUnwatched

useUnwatched.ts

/* eslint-disable @typescript-eslint/ban-types */
import { AnyRecord, RecordObj, SymbolAddWatcher, SymbolForAll, Watched } from "@hooks/constants";

export default function useUnwatched<T extends AnyRecord>(state: RecordObj<T> = {} as AnyRecord) {
  const watchList = {} as Record<string | symbol, Function[]>;

  const proxyHandler = {
    set(_target: any, prop: any, value: any) {
      Reflect.set(state, prop, value);
      const propStateSetters = watchList[prop] || [];
      const allStateSetters = watchList[SymbolForAll] || [];
      const updated = { [prop]: value };
      for (const setter of propStateSetters) setter(updated);
      for (const setter of allStateSetters) setter(updated);
      // Reset it, since React will re-render (and re-add) the watcher again anyway.
      watchList[SymbolForAll] = [];
      watchList[prop] = [];
      return true;
    },

    get(_target: any, prop: any, receiver?: any) {
      if (prop == SymbolAddWatcher) {
        return (key: string | symbol, setter: Function) => {
          const stateSetters = watchList[key] || [];
          stateSetters.push(setter);
          watchList[key] = stateSetters;
        };
      }
      return Reflect.get(state, prop, receiver);
    },
  };

  return new Proxy(state, proxyHandler) as Watched<T>;
}

Requires:

• constants https://gist.github.com/DarkRoku12/0935ef9062878d67e444a3497cbba826
• useWatched https://gist.github.com/DarkRoku12/106c6d3d104c5d6c81175df989c5c900