SimpleReactContext.tsx

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

function useCounterContext() {
  const [counter, setCounter] = useState(0);

  return {
    counter,
    setCounter,
  } as const;
}

type CounterContext = ReturnType<typeof useCounterContext>;

const Context = React.createContext<CounterContext | null>(null);

export const CounterProvider: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
  return <Context.Provider value={useCounterContext()}>{children}</Context.Provider>;
};

export function useCounter() {
  const context = useContext(Context);

  if (context == null) {
    throw new Error(`${useCounter.name} must be used within a ${CounterProvider.name}`);
  }

  return context;
}