useEffect() in my search Bar component causes an infinite loop, that I cannot understand-CodePudding

I'm new to React-Native and am following along in a course on react-native. This git hub links to a my repository the code has the problem(infinite loop) I describe in the following question. I have spent 12 hours trying to figure this out. Please help me figure this out if you can.

https://github.com/JohnyClash/mealsToGo

useEffect in question

above photo directory: 'src/features/restaurants/components/search.components.js'

    useEffect(() => {
    search(searchKeyword);
}, []);

The above code creates a feedback loop that causes the app to continuously fetch from a mock api, that returns the location information, loads to the screen and then quickly reloads ad infinitum.Its intended purpose is to run a single time on component mount to cause a single default search. Instead, This useEffect() inside of search.component runs its callback repeatedly. The useEffect is not tracking a dependency that has changed, and is given [] an empty array in place of dependency

useEffect(callback,dependencies)
useEffect(callback,[])

Shouldn't this syntax of useEffect only run once after its mount, and not run again if something is updated? If my understanding is correct how is it possible that this use effect is running in an infinite loop?

this useEffect() is the culprit as the infinite reload loop stops when it is this useEffect() is removed.
all other functionality down this logic chain does not create an infinite loop, as in the search method initiated through onSubmitEditing works well without looping.

CodePudding user response：

The problem of this infinite loop is being caused by this location object here, probably because every time the LocationContext is rerendered (a search is done or state is updated), it creates a new instance of the location object, which makes the useEffect be called again, then it search again, recreates the location object when calling useEffect again, which makes a new search, update some state and recreates the location object...

Code with problem of infinite loop:

    useEffect(() => {
        console.log(location)
        if (location) {
            const locationString = `${location.lat},${location.lng}`;
            retrieveRestaurants(locationString);
        }
    }, [location]);

If you do something like this, might solve this problem:

  useEffect(() => {
    if (location?.lat && location?.lng) {
      const locationString = `${location.lat},${location.lng}`;
      retrieveRestaurants(locationString);
    }
  }, [location?.lat, location?.lng]);

Also be careful with setTimeout, and not clearing it on component unmount

Tip: Always avoid object, array or function in useEffect dependency, and if necessary it needs to be memorized with useMemo or useCallback

CodePudding user response：

Try This :

useEffect(() => {
  search(keyword)
}, [keyword])