useStateContext

context.tsx

export function createStateCtx<A>(
  defaultValue: A
): [
  () => {
    state: A
    update: Dispatch<SetStateAction<A>>
  },
  FunctionComponent<{}>
] {
  type UpdateType = React.Dispatch<React.SetStateAction<typeof defaultValue>>
  const defaultUpdate: UpdateType = () => defaultValue
  const ctx = createContext({ state: defaultValue, update: defaultUpdate })
  const Provider: FunctionComponent = props => {
    const [state, update] = useState(defaultValue)
    return <ctx.Provider value={{ state, update }} {...props} />
  }
  const useCtx = () => {
    const c = useContext(ctx)
    if (!c) {
      throw new Error('useCtx must be inside a Provider with a value')
    }
    return c
  }
  return [useCtx, Provider] as [typeof useCtx, typeof Provider]
}