API call function in useEffect creates infinite loop in React Native - react-native

Question

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 useEffect() . But when i do that, it continues to an infinite loop. Here's how my component looks like:
const DemoComponent = (props) => {
const [renderArr, setRenderArr] = useState([]);
useEffect(() => {
getStatus();
},[renderArr])
const getStatus= async() =>{
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) => ({ ...e, ...statusObj[i] }));
setRenderArr(mergedArray);
}
}
return (
<View style={styles.container}>
{mergedArray.map((item, index) => {
return (
<TouchableOpacity>
<Text style={{ color: '#FFF' }}>{item.status}</Text>
</TouchableOpacity>
);
})}
</View>
);
};
Now, how can i stop this infinite loop. But in the meantime, i want to rerender when renderArr changes props.

Answer 1

Because you trigger the renderArr. You should do one call only when the component is mounted such as below snippet.
useEffect(() => {
getStatus();
}, []);

Answer 2

There are a few items I would like to point out here,
You have side effect registered for renderArr, which calls a function that updates renderArr. Any change in renderArr will invoke the side effect and this loop goes on forever.
Inside the getStatus function, you are updating your renderArr state after your application logic. But the render part is referring to some other variable mergedArray. You will have to change it to renderArr state.
const DemoComponent = (props) => {
const [renderArr, setRenderArr] = useState([]);
useEffect(() => {
getStatus();
},[]); // removed dependency to call it only once, (on mount)
const getStatus= async() =>{
....
setRenderArr(mergedArray); // state is updated with the new processed value
}
return (
<View style={styles.container}>
{renderArr.map((item, index) => { // changed to the state variable
return (
<TouchableOpacity>
<Text style={{ color: '#FFF' }}>{item.status}</Text>
</TouchableOpacity>
);
})}
</View>
);
};