Implementé un contexto React que escucha un documento de mi base de datos cuando está montado.
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> ); }Mi propósito es escuchar este documento en un componente global que envuelve toda la aplicación... y creo que Contexto es una buena herramienta para mi caso de uso.
El problema es que estoy recibiendo esta advertencia:
Advertencia: la propiedad de
valuees necesaria para<Context.Provider>. ¿Lo escribiste mal u olvidaste pasarlo?
¿Es 'ilegal' usar el contexto de esta manera sin pasar ningún valor a los consumidores?
Esto probablemente sería más adecuado como gancho personalizado. Aquí hay una implementación de ejemplo:
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; }