React state context

makeStateContext.tsx

import React, { Dispatch, createContext, useMemo, useContext } from "react";

type ProviderProps<S, A> = React.PropsWithChildren<{
  state: S;
  dispatch: Dispatch<A>;
}>;

type MakeStateContextReturn<S, A> = [
  ContextProvider: ({ state, dispatch }: ProviderProps<S, A>) => JSX.Element,
  useContext: () => [S, Dispatch<A>]
];

export function makeStateContext<S, A>(): MakeStateContextReturn<S, A> {
  const Context = createContext<[S, Dispatch<A>]>(null as any);

  const ContextProvider = ({
    state,
    dispatch,
    ...rest
  }: ProviderProps<S, A>) => {
    return (
      <Context.Provider
        value={useMemo(() => {
          return [state, dispatch];
        }, [state, dispatch])}
        {...rest}
      />
    );
  };

  const useContextHook = () => useContext(Context);

  return [ContextProvider, useContextHook];
}