Firebase values not updating constantly

Question

Hi so my code below is getting the latitude and longitude for a user using a drag and drop marker. When i console .log the latitude and longitude is constantly updated in the console, but this doesn't happen for firebase and I can't figure out why.

My code below is the code that deals with this using leaflet maps.

I'm writing it to firebase using a react hook like below. But I think my error might be in the useEffect but I am not sure how to fix that.

                    location={location}
                    draggable={true}
                    title="sample text"
                    onDragMarker={(e) => {
                        console.log("e",e);
                        let loc = {lat: e.lng, lng:e.lat};
                        setLocation(loc);
                        setLongitude(e.lat)
                        setLatitude(e.lng)
                    }}

import React, {useState,useEffect } from "react";
import dynamic from "next/dynamic";
import 'firebase/firestore';
import 'firebase/firestore';
import fire from 'firebase/app'



const OsmMapNoSSR = dynamic(() => import("../../components/Map/osmMap.js"),{
    ssr: false,
});

export default function Home() {
    const coordinates = []
    
    const [latitude, setLatitude] = useState("")
    const [longitude, setLongitude] = useState("")

    navigator.geolocation.getCurrentPosition(function(position) {
        
        //setLatitude(position.coords.latitude );
        //setLongitude(position.coords.longitude);
     
 }); 
    const[location, setLocation] = useState({ lng: 53.363392004396104, lat: -6.209536});


    console.log(latitude,longitude, " loooooool")
    const getData = async () => {
        let currentUserUID = fire.auth().currentUser.uid
      
              const db = fire.firestore();
            
              const doc = await fire
              .firestore()
              .collection('LocationChoice')
              .doc(currentUserUID)
              .get()
              ///firefunctions.addfavs
                db.collection("LocationChoice")
                .doc(currentUserUID)
                .set({
                  lat: latitude,
                  long: longitude,
                  latlng: location
                })
                
            }
      
              useEffect(() => {
                let mounted = false
        
                if(!mounted){
                  
                   getData()
                }
                
                return () => {
                    mounted = true
                   // getData()
                }
            
            }, [])
        

//     lng: 53.363392004396104
// lat: -366.1387451118992



// const showMyLocation = () => {
//     if (location.loaded && !location.error) {
//       mapRef.current.leafletElement.flyTo(
//         [location.coordinates.lat, location.coordinates.lng],
//         ZOOM_LEVEL,
//         { animate: true }
//       );
//     } else {
//       alert("error");
//     }
//   };


// const map = useMapEvents({
//     click() {
//       map.locate()
//     },
//     locationfound(e) {
//       setPosition(e.latlng)
//       map.flyTo(e.latlng, map.getZoom())
//     },
//   })

    return(
        <div>
            <OsmMapNoSSR

                center={location}
                location={location}
                draggable={true}
                title="sample text"
                onDragMarker={(e) => {
                    console.log("e",e);
                    let loc = {lat: e.lng, lng:e.lat};
                    setLocation(loc);
                    setLongitude(e.lat)
                    setLatitude(e.lng)
                }}
                
                
            />    
            
            
            {"lng: "+ location.lng}
            <br />
            {"lat: " + location.lat}
           

            {/* <button onClick={showMyLocation}>
Locate Me  
</button> */}
        </div>



        
    );
}

Answer 1

Currently you invoke your getData method only once on mount. Specify your dependency array in useEffect, see docs, to include the values that should trigger the hook again.

Below is a useEffect that triggers on latitude and longitude and has a loading flag isLoading (otherwise you would update Firestore multiple times with the same value). Please note that the code below is just for illustration and neither complete nor tested.

const [isLoading, setIsLoading] = useState(false)
const [latitude, setLatitude] = useState("")
const [longitude, setLongitude] = useState("")

const updateLocationInFirestore = useCallback(async (lat, lng) => {
  setIsLoading(true)

  await db.collection("LocationChoice").doc(currentUserUID).set({
    lat: lat,
    long: lng,
    latlng: { lat, lng }
  })

  setIsLoading(false)
}, [currentUserUID])

useEffect(() => {
  if (!isLoading) {
    // Only invoke new Firestore update when not already updating
    updateLocationInFirestore(latitude, longitude)
  }
}, [isLoading, latitude, longitude, updateLocationInFirestore])

If you want to do different things when latitude or longitude changes, you can have multiple useEffect hooks in your component. Just adjust the dependency array.