tilstand.ts

import { useState } from "react";

/**
 * Creates a specialised `useState` which includes mutators in its definition.
 * The returned object includes a `get()` method and a `set(x)` method by default.
 * @param init The default value
 * @param mutators an object containing the mutator functions
 * @example
 * ```
 *  const counter = useTilstand(0, {
 *      inc: (x) => x + 1,
 *      dec: (x) => x - 1,
 *      reset: () => 0
 *  });
 *
 * // later
 * <span>{counter.get()}</span>
 * <button onClick={counter.inc}>+</button>
 * <button onClick={counter.dec}>-</button>
 * ```
 */
export default function useTilstand<
    T,
    Mut extends { [index: string]: (x: T) => T }
>(init: T, mutators: Mut) {
    const [state, setState] = useState(init);

    // default accessors
    const result = {
        get: () => state,
        set: (x: T) => setState(x),
    };

    Object.entries(mutators).forEach(([key, fn]) => {
        result[key] = () => setState(fn(state));
    })

    return result as typeof result & { [K in keyof Mut]: () => T };
}

z_tilstand-test.tsx

function Test() {
    const counter = useAppState(0, {
        inc: (x) => x + 1,
        dec: (x) => x - 1,
        reset: () => 0,
    });

  return (
    <div>
      <h3>{counter.get()}</h3>
      <button type="button" onClick={counter.inc}>+</button>
      <button type="button" onClick={counter.dec}>-</button>
      <button type="button" onClick={counter.reset}>reset</button>
    </div>
  );
}