[React: Context Boilerplate] Sets up a hook to use context without the undefined initialization value #react #context

useContext.tsx

type FooContextType = { some: 'type' };

export const FooContext = React.createContext<FooContextType | undefined>(
  undefined
);

export function FooProvider(props: { children: React.ReactNode }): JSX.Element {
  const value = useFoo();
  return (
    <FooContext.Provider value={value}>{props.children}</FooContext.Provider>
  );
}

export function useFooContext(): FooContextType {
  const context = React.useContext(FooContext);
  if (!context) {
    throw new Error('useFooContext must be used within a FooProvider');
  }
  return context;
}