I have implemented a React context which listens to one document of my database when it is mounted.
function AccountStateProvider({ currentUser, children }) {
const { signOut } = useSignOut();
/**
* Handles the current user's account deletion, signing out from the active
* session.
*
* @returns {void} Nothing.
*/
const handleOnAccountDeleted = () => {
signOut(false);
};
useEffect(() => {
if (!currentUser.data?.id) {
return undefined;
}
//
// Forces the logout of all active sessions on different mobile
// devices after the user's account deletion.
//
const unsubscribe = onAccountDeleted(
currentUser.data.id,
handleOnAccountDeleted
);
return () => {
unsubscribe();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [currentUser.data?.id]);
return (
<AccountStateContext.Provider>
{children}
</AccountStateContext.Provider>
);
}
My purpose is to listen to this document in a global component which wraps the entire app... and I think that Context is a good tool for my use case.
The problem is that I am getting this warning:
Warning: The
valueprop is required for the<Context.Provider>. Did you misspell it or forget to pass it?
Is it 'illegal' to use context this way without passing any value to the consumers?
This would likely be better suited as a custom hook. Here's an example implementation:
function useAccountState(currentUser) {
const { signOut } = useSignOut();
/**
* Handles the current user's account deletion, signing out from the active
* session.
*
* @returns {void} Nothing.
*/
const handleOnAccountDeleted = () => {
signOut(false);
};
useEffect(() => {
if (!currentUser.data?.id) {
return undefined;
}
//
// Forces the logout of all active sessions on different mobile
// devices after the user's account deletion.
//
const unsubscribe = onAccountDeleted(
currentUser.data.id,
handleOnAccountDeleted
);
return () => {
unsubscribe();
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [currentUser.data?.id]);
return null;
}