Create context factory function

Do you want to request a feature or report a bug?

feature

React.createContext just returns the value passed in on createContext if there is no provider above in the tree.

Is it possible to get a version that takes in a factory function in the form: createContextFn(fn:() => defaultValue) The factory function will be invoked whenever a default value is needed.

I have two use cases for this.

• If you want to enforce the usage of a context e.g. :

createContextFn(() => throw new Error("Default value not allowed, Please use FooProvider."))

• Or you want to use a react hook as a default value:

function useTotal(){
 const [total, setTotal] = useState(0);
 const incFn = () => setTotal(total + 1);
 return {
   total,
   incFn
 };
}


createContextFn(useTotal)

[dai-shi]

can we enforce useContext to throw when it’s used outside <Provider /> ?

How do you like this?

const SomeCtx = React.createContext(new Proxy({}, { get() { throw new Error('...'); } }));

It doesn’t work for primitives though.

[mwmcode]

Ok… I’m doing the following to make sure it throws when used outside:

1. initializing to null when creating context,
2. set context value to initVal inside the provider
3. so useContext throws when value is null

const AuthCtx = createContext<AuthCtxType | null>(null);

// set init value in the provider
function AuthProvider(props) {
  const [authUser, setUser] = useState<AuthUser>(authUserTemplate); // init val

  useEffect(() => {
    const storageUser = storage.local.getItem(StorageKeys.user);
    const isOnLoginPage = window.location.pathname === '/';

    if (storageUser?.id_token) {
      setUser(storageUser);
      isOnLoginPage && history.push('home'); // TODO: push to user type
    } else {
      history.push('/'); // TODO
    }
  }, [JSON.stringify(authUser)]);
}

export function useAuth(): AuthCtxType {
  const ctx = useContext(AuthCtx);

  if (!ctx) {
    throw new Error('Cannot useAuth() outside <AuthProvider />');
  }
  return ctx;
}