Reach hook: useWatched

useWatched.ts

import { useState } from "react";
import { SymbolAddWatcher, SymbolForAll, Watched } from "./constants";

export type RecordIndex = string | number | symbol;
export type AnyRecord = Record<RecordIndex, any>;
export type RecordObj<T extends AnyRecord> = T & AnyRecord;

export default function useWatched<T extends AnyRecord>(
  watched: Watched<T>,
  watchList: Array<keyof T> | Array<string | symbol> = [SymbolForAll],
  onChance?: (updated: Partial<RecordObj<T>>) => void
) {
  const [, setter] = useState(watched);

  for (const key of watchList) {
    // prettier-ignore
    const cb = onChance ? (v: any) => { setter(v); onChance(v); } : setter;
    watched[SymbolAddWatcher](key, cb);
  }

  return watched;
}

Requires:

• constants https://gist.github.com/DarkRoku12/0935ef9062878d67e444a3497cbba826
• useUnwatched https://gist.github.com/DarkRoku12/7969c06528f58e5bff12483c83fdf254