Tengo un componente principal que siempre necesita recuperar un token antes de que se ejecuten los subcomponentes. Como se discutió en esta publicación , ¿cuál es el orden correcto de ejecución de useEffect en los componentes padre e hijo de React? los subcomponentes useEffect se ejecutan primero.
Mi pregunta es ¿cómo puedo manejar la recuperación del token en la carga inicial (en el componente principal)?
Lo resolví usando un estado para rastrear si la sesión se ha inicializado. Si la sesión no se ha inicializado, muestra una animación de carga. Esto solo se ejecuta en la carga inicial de la aplicación. El componente de carga no puede tener un efecto de uso que requiera la API con un token o información de usuario válidos.
function App() { const [hasSession, setSession] = useState(false) useEffect(() => { async function initUserProfile() { await apiService.init() setSession(true) } initUserProfile() }, []) if (hasSession === false) { return (<Loading />) } return ( <Router>...</Router> ) }