How to create a generic Context.Provider in React? - reactjs

Question

I am using react's context to share data across component.
For example, I could create a user context:
const useFirebaseUser = () => {
const [user, setUser] = useState({} as User);
useEffect(() => {
return firebase.auth().onAuthStateChanged((user) => {
if (user) {
const { displayName, photoURL, uid } = user;
setUser({
displayName,
photoURL,
uid,
isAuthenticated: true,
} as User);
} else {
setUser({} as User);
}
});
}, []);
return user;
};
export const FirebaseUserContext = createContext({} as User);
export const GlobalFirebaseUserProvider = ({ children }: { children: ReactNode }) => (
<FirebaseUserContext.Provider value={useFirebaseUser()}>{children}</FirebaseUserContext.Provider>
);
similarly, I could also create a similar context to share other data, like todos
const useTodos = () => {
const [todos, setTodos] = useState(['']);
// ..
return { todos, setTodos };
};
export const TodosContext = createContext(
{} as { todos: string[]; setTodos: React.Dispatch<React.SetStateAction<string[]>> }
);
export const TodosContextProvider = ({ children }: { children: ReactNode }) => (
<TodosContext.Provider value={useTodos()}>{children}</TodosContext.Provider>
);
Upon these, I want to abstract out the value part. I am trying to create a Generic Provider:
import React, { createContext, ReactNode } from 'react';
export const CreateGenericContext = <T extends {}>(value: T) => {
const GenericContext = createContext({} as T);
const GenericContextProvider = ({ children }: { children: ReactNode }) => (
<GenericContext.Provider value={value}>{children}</GenericContext.Provider>
);
return { GenericContext, GenericContextProvider };
};
thus my user context could simplify into
export const {
GenericContext: UserContext,
GenericContextProvider: UserContextProvier,
} = CreateGenericContext(useUser());
However, React throw error message:
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
Is this mean it is impossible to create a generic context providre for React? I had searched online, and tutorial seems show that for context not using hooks would work. However, in case of using react hooks, how to create a generic context provider in react?

Answer 1

Delay the custom hook, hook can only be called/invoked inside function component.
import React, { createContext, ReactNode } from 'react';
export const createGenericContext = <T extends {}>(hook: () => T) => {
const GenericContext = createContext({} as T);
const GenericContextProvider = ({ children }: { children: ReactNode }) => (
<GenericContext.Provider value={hook()}>{children}</GenericContext.Provider>
);
return { GenericContext, GenericContextProvider };
};