React Useeffect Avoid Update Callback In Every Update

Is there a way to avoid update a callback in useEffect?. For example I am subscribed an event with geofire, this listens for changes and receive locations. I need to update my sta

Solution 1:

Have you checked if the return conditional is working on page load (just put a console log in there)?

From reading it, it seems both useEffects get called on page load, but the second one should exit immediately, and then get called again after the first one completes.

Then I notice you update state through an async call back, which may have something to do with it. It's difficult to say without seeing it in action.

I would say try rewriting your setCurrentLocation with a function rather than object:

setCurrentLocation((currentLocation) => ({
    ...currentLocation,
    [key]: {location},
}));

Maybe its not getting passed through and toggling between new and old data.