Recursive method is calling again and again

Question

    const callAFunction = () => {
      if (AppState.currentState === 'background') {
        function1()
      }
    }

    useEffect(()=>{
AppState.addEventListener('change', callAFunction);
    },[])
    const function1 = () => {
      axios.get('/user_login', {
        params: {
          username: 'john1904',
        }
      })
        .then(function (response) {
          if (response.data.status === false) {
            function1()
          }
    
        })
    }

I am using this above function recursively. But as the app goes background function1 is calling again and again as still the function1() i have already called. So i want that function1() call every time as the app goes background. But in Async form as if function1() then it will not call it again.

So i am not able to get how can i do this in when app is in background so it will check if this function is running then don't run it other wise run it.

score 0 · Answer 1 · answered Aug 17 '22 at 21:53

Right now, if status is false, the only time between requests is the time it takes Axios to call the endpoint. This can be very little time (like a few milliseconds). If you want to poll until you get a status of true, set a timeout for the request.

// ...
.then(function (response) {
  if (response.data.status === false) {
    setTimeout(function1, 1000);
  }   
})

The above example will take 1 second between requests. You can adjust 1000 to suit your needs.

See also this question for a common issue with timeouts and React components: Can't perform a React state update on an unmounted component

Recursive method is calling again and again

1 Answers1