@react #useStates #simple-state-machine

use-states.js

import { useEffect, useState } from "react";

export function useStates(defaultState) {
  const [states, setStates] = useState({});

  //SCOPE:  used as a make-shift logger, triggers on each state change
  useEffect(() => console.log("states monitor", states), [states]);

  useEffect(() => {
    // SCOPE:  set initial state - or - throw if no defaultState
    if (!defaultState) {
      throw new Error(
        "useStates(): Error: must provide default state to initialize hook"
      );
    }
    setStates(defaultState);
  }, []);

  const setters =
    Object.keys(states)?.length &&
    Object.keys(states)
      ?.map((state) => ({
        // SCOPE:  create an array of setState function objects for each key in current state
        [`set${state[0].toUpperCase() + state.substring(1)}`]: (newState) => {
          setStates((prevState) => ({ ...prevState, [state]: newState }));
        },
      }))
      // SCOPE:  reduce the array of setState functions objects into a single object
      .reduce((obj, acc) => ({ ...acc, ...obj }), {});

  return { ...states, ...setters };
}