"too much recursion" while updating params(setData) into Firebase RTDB through setInterval-CodePudding

I'm new to react native. I have a problem while updating data(latitude, longitude, timestamp) for each user(member) to Firebase database realtime, I get endless loops

The error I have "too much recursion"

firebase.config.ts

const firebaseConfig = {
    ...
};

export const getCurrentLocation = (phoneNumber: number, setData: (locationParams: any) => void) => {
    const db = getDatabase();
    const reference = ref(db, 'members/'   phoneNumber);
    onValue(reference, (snapshot) => {
        const data = snapshot.val();
        setData(data);
    })
};


export const setCurrentLocation = (phoneNumber: number, latitude: number, longitude: number, timestamp: number) => {
    const db = getDatabase();
    const reference = ref(db, 'members/'   phoneNumber);
    set(reference, {
        latitude: latitude,
        longitude: longitude,
        timestamp: timestamp,
    }).then(() => console.log('setCurrentLocation to mainUser/firebase.config'));
};
const app = initializeApp(firebaseConfig);

memberList.tsx

const [userPhoneNumber, setUserPhoneNumber] = useState('0');
const members = useSelector((state: any) => state.members);

//get user's phoneNumber
const auth = getAuth();
    useEffect( ()=> {
        onAuthStateChanged(auth, (user) => {
            if (user) {
                setUserPhoneNumber(user.email.replace(/\D/gi, '') || '');
            } else {
                console.log('logged out')
            }
        });
    }, [])


useEffect(() => {
        const timer = setInterval( () => {
            
            members.map(function (el) {
                getCurrentLocation(el.phoneNumber, (locationParams: any) => {
                    let timestamp = new Date().getTime()/1000;
              
                    setCurrentLocation(el.phoneNumber, locationParams.latitude, locationParams.longitude, timestamp)
                })
            })
        }, 10000);

        return () => clearInterval(timer);
    }, []);

CodePudding user response：

This looks wrong:

const timer = setInterval( () => {
    
    members.map(function (el) {
        getCurrentLocation(el.phoneNumber, (locationParams: any) => {
            let timestamp = new Date().getTime()/1000;
      
            setCurrentLocation(el.phoneNumber, locationParams.latitude, locationParams.longitude, timestamp)
        })
    })
}, 10000);

Since your getCurrentLocation attaches a listener with onValue, just doing that once for each user will execute your setData call right away for the current value in the database, and again whenever that user's data is updated. Combining onValue with an interval timer is an antipattern in Firebase, the database already calls back to your code when the data changes. Right now you attach a new listener for each user each second, so if there's an update to a user's data after more than a few seconds, your callback (and setData) will be called way more often than necessary.

In Firebase, attach your listeners once (typically when the page loads) and let them continue to work until the page is unloaded (or other changes are needed in the listeners).

So if you remove the setInterval from the code, you should be getting better results.