ExampleContext.ts

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

interface ExampleContextValue {
  value: number;
  setValue: (newValue: number) => void;
}

const ExampleContext = React.createContext<ExampleContextValue | undefined>(
  undefined,
);

interface ExampleContextProps {
  children: React.ReactNode;
}

export function ExampleContextProvider({ children }: ExampleContextProps) {
  const [value, setValue] = useState<number>(0);

  const contextValue: ExampleContextValue = useMemo((): ExampleContextValue => {
    return { value, setValue };
  }, [value]);

  return (
    <ExampleContext.Provider value={contextValue}>
      {children}
    </ExampleContext.Provider>
  );
}

export function ExampleContextConsumer({
  children,
}: {
  children: (ctx: ExampleContextValue) => React.ReactNode
}) {
  const ctx = useExampleContext()
  return <>{children(ctx)}</>
}

export function useExampleContext() {
  const context = useContext(ExampleContext);
  if (context === undefined) {
    throw new Error('useExampleContext must be used within a ExampleContextProvider');
  }
  return context;
}