react-native: On useEffect hook call when api response is updated to state it'll go to infinite loop but infinite array is printing in console

Question

//Initial state
const items : IFreinds [] = [];
export default function  FreindsList()
{
    let [items1, setItems] = useState(items);
// hook call
    useEffect( () => {

       let list  = FriendsService.getFriends(id);
       list.then(resp =>{ 
        setItems(resp);
       });
        console.log('items1 ',items1); //infinite loop
    },[items1]); //tried by setting empty array []


    return(
        <View  style={styles.container}>
            <FlatList
            data = {items1}
            renderItem = {({item}) =>
            {
                return <Text>
                    {item.FName}
                </Text>
            }}/>
        </View>
    );
}

Steps:

Created Initial state empty array items
API is called and response is set to setItems(resp) hook
Console runs into infinite loopenter code here

Welcome to Stack Overflow! I'd suggest adding a bit more explanation of your problem into the question itself. Right now the description of the problem is in the title, and that is quite confusing to read. — Hayuki, May 25 '20 at 09:54

score 0 · Answer 1 · answered May 25 '20 at 07:48

The reason your code goes into an infinite loop is because you add items1 to dependency array and the value of items1 is being set inside the useEffect

If you only wish to execute the useEffect once, pass an empty array as the dependency to useEffect

const items : IFreinds [] = [];
export default function  FreindsList() {
    let [items1, setItems] = useState(items);
    useEffect( () => {

       let list  = FriendsService.getFriends(7);
       list.then(resp =>{ 
        setItems(resp);
       });
    },[]);


    return(
        <View  style={styles.container}>
            <FlatList
            data = {items1}
            renderItem = {({item}) =>
            {
                return <Text>
                    {item.FName}
                </Text>
            }}/>
        </View>
    );
}

Yes, I tried it by passing an empty array but how to update state from the API response. After passing empty [] state is not update from API response. console is printing empty array — iamcoder, May 25 '20 at 08:05
@ManoharR Console.log will print an empty array but the state will get updated and will reflect in the next re-render. PLease check https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately/54069332#54069332 — Shubham Khatri, May 25 '20 at 08:30

score 0 · Answer 2 · answered May 25 '20 at 07:48

It's because you added items1 as a dependency to the hook. It makes the hook rerun on every render (because you also set items1 there).

hook -> update items1 -> items1 is updated -> hook again

You need to remove items1 from the dependency array (and console.log as well). You can console.log outside the effect instead.

react-native: On useEffect hook call when api response is updated to state it'll go to infinite loop but infinite array is printing in console

2 Answers2