React-Native infinite loop

Question

I am trying to get data from my firebase-firestore I an showing a loading state to wait for the data to load however when it does load it keeps returning the firestore data infinite times. Please may someone help me.

This is my code Paper is just a custom component

import Paper from '../Components/Paper'
import firebase from 'firebase'
import { useState } from 'react'

const Home = (props) => {
    const renderMealItem = (itemData) =>{
        return (
            <Paper 
                title={itemData.item.name}
                serves={itemData.item.servings}
                time={itemData.item.time}
                image={itemData.item.imageUri}

            />
        )
    }
    const [loading, setLoading] = useState(false)
    const [all, setAll] = useState([])
    
    useEffect(() => {
        setLoading(true)
        checkReturn()
        getUser()
        
    },[])

    const checkReturn = () => {
        if(all !== undefined){
            setLoading(false)
        }
    }

    const getUser = async() => {
        try {
            await firebase.firestore()
            .collection('Home')
            .get()
                .then(querySnapshot => {
                    querySnapshot.docs.forEach(doc => {
                        setAll(JSON.stringify(doc.data()));
                    });
                });
                    
        }catch(err){
            console.log(err)
        }
        
    }
    return(
        <View style={styles.flatContainer}>
            <FlatList
                data={all}
                keyExtractor={(item, index) => index.toString()}
                renderItem={renderMealItem}/> 
        </View>
    )
}

Answer 1

Try passing an empty array as an argument to useEffect like so:

   useEffect(() => {
        setLoading(true)
        checkReturn()
        getUser()
        
    }, [])

Answer 2

useEffect without second parameter will get executes on each update.

    useEffect(() => {
        setLoading(true)
        checkReturn()
        getUser()
        
    })

so this will set the loading and tries to get the user. and when the data comess from server, it will get runned again.

So you should change it to: useEffect(() => {...}, []) to only get executed on mount phase(start).

Update: you should check for return on every update, not only at start. so change the code to:

    useEffect(() => {
        setLoading(true)
        getUser()  
    }, [])
    useEffect(() => {
        checkReturn()
    })

Ps: there is another issue with your code as well:

querySnapshot.docs.forEach(doc => {
  setAll(JSON.stringify(doc.data()));
});

maybe it should be like:

setAll(querySnapshot.docs.map(doc => JSON.stringify(doc.data())));