Tengo un gancho useEffect con dos funciones dentro, la primera (fetchImages) obtiene todas las imágenes de usuario almacenadas en el almacenamiento de firebase.

El segundo (loadImages) espera a fetchImages y establece la imagen en una matriz de estado. El problema es que la matriz de imágenes regresa vacía a menos que vaya a una página diferente y regrese ... entonces la matriz se llena con las URL de las imágenes.

No estoy seguro de si algo anda mal con mi gancho useEffect o mi ubicación de espera asíncrona, o algo más. La verificación if para currentUser se debe a que currentUser devuelve como nulo en la primera carga.

 const [images, setImages] = useState([]); // All user images from storage useEffect(() => { if (currentUser) { const fetchImages = async () => { setLoading(true) const result = await storage.ref(`images/${currentUser.id}`).listAll(); console.log(result) const urlPromises = result.items.map((imageRef) => imageRef.getDownloadURL() ); console.log(urlPromises) return Promise.all(urlPromises); }; const loadImages = async () => { const images = await fetchImages(); setImages(images); setLoading(false); }; loadImages(); } console.log(loading) }, []); console.log(images, image)

El archivo currentUser userContext

 export const UserContextProvider = ({ children }) => { const [currentUser, setUser] = useState(null); // const [currentUser, setUser] = useState(''); useEffect(() => { let unsubscribeFromAuth = null; unsubscribeFromAuth = auth.onAuthStateChanged(async userAuth => { if (userAuth) { const userRef = await createUserProfileDocument(userAuth); userRef.onSnapshot(snapShot => { setUser({ id: snapShot.id, ...snapShot.data() }); }); } else { setUser(null) } }); return () => { unsubscribeFromAuth(); }; }, []) // console.log(unsubscribeFromAuth) const toggleUser = () => { auth.signOut() .then(() => { window.localStorage.clear(); }) .then(() => { setUser(null) }) .catch(e => console.log('There was a error:'(e))) }