[useSpreadState] #react #typescript #hooks

useSpreadState.ts

import React from 'react';
import { useState, useCallback } from 'react';

export type SetSpreadStateFn<T> = (
  s: Partial<T> | ((ns: T) => Partial<T>),
) => void;

export type SpreadStateReturnType<T> = [T, SetSpreadStateFn<T>];

export default function useSpreadState<State>(
  initialValue: State | (() => State),
): SpreadStateReturnType<State> {
  const [state, setState] = useState(initialValue);

  const spreadSetState = useCallback(
    newState => {
      if (typeof newState === 'function') {
        setState(previousState => {
          const newStateValue = newState(previousState);
          return {
            ...previousState,
            ...newStateValue,
          };
        });
      } else {
        setState(previousState => ({ ...previousState, ...newState }));
      }
    },
    [setState],
  );

  const ret: SpreadStateReturnType<State> = [state, spreadSetState];
  const memoed = React.useMemo(() => ret, ret);
  return memoed;
}