title: API call function in useEffect creates infinite loop in React Native
body: <p>I have a Component where i'm maping an Array to render data. But before that, i need to call API taking id from each objects of the array to modify the array. Now, i am calling the API's in a function and calling the function in <code>useEffect()</code> . But when i do that, it continues to an infinite loop. Here's how my component looks like:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const DemoComponent = (props) =&gt; {
      const [renderArr, setRenderArr] = useState([]);
  
      useEffect(() =&gt; {
          getStatus();
        },[renderArr])
  
  
      const getStatus= async() =&gt;{
          var arr = [
                {id: 1,name: Leather},
                {id: 2,name: Shoe},
                {id: 3,name: Belt},
              ]
        var firstStatus =  await API(arr[0].id , props.token)
        var secondStatus = await API(arr[1].id , props.token)
        var thirdStatus =  await API(arr[2].id , props.token)
        var statusObj = [
              { status: firstStatus.status },
              { status: secondStatus.status },
              { status: thirdStatus.status },
        ]
        var mergedArray = newArr.map((e, i) =&gt; ({ ...e, ...statusObj[i] }));
           setRenderArr(mergedArray);
        }
      }
      
      
      return (
        &lt;View style={styles.container}&gt;
          {mergedArray.map((item, index) =&gt; {
              return (
                  &lt;TouchableOpacity&gt;
                   &lt;Text style={{ color: '#FFF' }}&gt;{item.status}&lt;/Text&gt;
                  &lt;/TouchableOpacity&gt;
              );
          })}
      &lt;/View&gt;
      );
  };</code></pre>
  </div>
  </div>
  </p>
  <p>Now, how can i stop this infinite loop. But in the meantime, i want to rerender when <code>renderArr</code> changes props.</p>