Estoy moviendo una aplicación React de clase a componentes funcionales donde tiene sentido, sin embargo, tengo un pequeño problema con el useContext , o quizás solo con la API de contexto en general.

Mi aplicación admite estados autenticados y no autenticados. Para los usuarios autenticados, me gustaría hacer una llamada a la API que devuelva los detalles de los elementos que poseen y los presente en una tabla. Debido a que esta lista es razonablemente estática, me gustaría almacenarla en contexto y pasarla a los componentes secundarios que mostrarán diferentes vistas de esos datos. No quiero volver a esa API para diferentes componentes. Los usuarios autenticados y los usuarios no autenticados también podrán ver los elementos que poseen otras personas visitando sus páginas/rutas, por ejemplo, usuario/uno, usuario/dos. Creo que estos datos se almacenarán en el estado del componente.

Tengo un stackblitz en https://stackblitz.com/edit/react-jvmryf que muestra lo que estoy haciendo.

Creé un contexto ( UserContext ) que se comparte con los componentes secundarios e, idealmente, me gustaría que el valor de UserContext.data proporcione el valor de la tabla, pero parece que cuando se representa el componente, los datos no están disponibles. Esto es visible en los registros de la consola donde HERE IS USERCONTEXT {"name":"alice","age":30,"data":{}} se imprime varias veces, antes de que finalmente se imprima con el objeto de datos que se completa. Actualmente, el componente NewTable obtiene datos para la tabla a través de una llamada API en el componente para que pueda ver cómo debería verse la tabla.

Realmente agradecería consejos sobre si estoy haciendo la llamada API y configurando Contexto en el lugar correcto, y cómo debería representar esos datos en componentes secundarios (en este caso específico, NewTable, aunque habrá otros componentes en el futuro) .