• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

208
Views
Using async await to retrieve images from firebase storage in react

I have a useEffect hook with two functions inside of it, the first (fetchImages) gets all of the user images stored in firebase storage.

The second (loadImages) awaits for the fetchImages and sets the image into a state array. The problem is that the images array is returning empty unless you go to a different page and come back...then the array is filled with image urls.

Im not sure if something is wrong with my useEffect hook or my placement of async await, or something else. The if check for currentUser is because currentUser returns as null on first load.

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)

The currentUser userContext file

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)))
    }
almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Add currentUser to the useEffect hook's dependency array. When the currentUser state updates you want the side-effect to be fetching the related images, or clearing them out.

const [images, setImages] = useState([]); // All user images from storage

useEffect(() => {
  if (currentUser) {
    const fetchImages = async () => {
      const result = await storage.ref(`images/${currentUser.id}`).listAll();
      const urlPromises = result.items.map((imageRef) =>
        imageRef.getDownloadURL()
      );
      return Promise.all(urlPromises);
    };

    const loadImages = async () => {
      setLoading(true);
      try {
        const images = await fetchImages();
        setImages(images);
      } catch(error) {
        // handle error, log it, show message, etc...
      }
      setLoading(false);
    };
    loadImages();
  } else {
    setImages([]);
  }
}, [currentUser]);
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error