Hide value initialization in a React-oriented helper using context and conditional server/browser values

createLongLastingContext.ts

function createLongLastingContext<T>(factory: () => T) {
  const defaultValue = typeof document !== "undefined" ? factory() : null;
  const ctx = React.createContext<T | null>(defaultValue);
  return {
    useContext: () => {
      const value = React.useContext(ctx);
      if (!value) {
        throw new Error("Context not initialized.");
      }
      return value;
    },
    Provider: ({ children }) => {
      return (
        <ctx.Provider
          value={typeof document !== "undefined" ? defaultValue : factory()}
        >
          {children}
        </ctx.Provider>
      );
    },
  };
}