React Context without default value

Creating a React Context using createContext() requires a default value. If you cannot provide a useful default value, you have to make the context nullable and then, when using the context value, verify that it is not null.

const context = createContext<User | null>(null);

export function useUser() {
  const value = useContext(context);
  if (value === null) throw new Error("UserContext not provided");
  return value;
}

Instead of repeating this boilerplate code every time, you can move this logic into a small utility function:

// Represents our empty value
const EMPTY = Symbol();

export function createRequiredContext<T>(): [Provider<T>, () => T] {
  // Context, initialized with EMPTY
  const context = createContext<T | typeof EMPTY>(EMPTY);

  // Provider with EMPTY excluded (only T values are allowed)
  const Provider = context.Provider as Provider<T>;

  // Hook that throws an error if the value is EMPTY
  const useStrictContext = () => {
    const value = useContext(context);
    if (value !== EMPTY) return value;
    throw new Error("Missing context provider");
  };

  return [Provider, useStrictContext];
}

In our approach, we utilize a unique symbol, denoted as EMPTY, to differentiate between a default value and an actual value. This strategy provides the flexibility to create nullable contexts when necessary. You can then call the createRequiredContext function to create a new context:

const [UserProvider, useUser] = createRequiredContext<User>();