0

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.
JohnyClash
  • 630
  • 1
  • 5
  • 10
  • @Rotem I sadly don't understand your feedback. If you could clarify the meaning here. Do you see the error in how I am returning my code in the search.components.js file? – JohnyClash Apr 17 '22 at 04:19
  • Sorry, I misread, was late. – Rotem Apr 17 '22 at 11:50

2 Answers2

1

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

Roni Castro
  • 1,968
  • 21
  • 40
  • 1
    thank you for the time you spent going through my code and giving this thoughtful response. This did indeed fix my problem, I am too new to stack Overflow and I cannot upvote your response. Thank you for going above and beyond giving a solution example, it helped me further understand the concept you communicated. – JohnyClash Apr 17 '22 at 06:57
0

Try This :

useEffect(() => {
  search(keyword)
}, [keyword])
sabdahtb
  • 231
  • 1
  • 3
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – mohammad mobasher Apr 17 '22 at 08:24