How can I escape React useEffect infinite loop?

user_10263251 0
Viewed 1430

I wrote a code that receives the api through React Hook and calls the api again in the child component by passing the id when clicking. However, there seems to be a problem in settingState with arrow function in useEffect or onClick of child component.

I would appreciate it if you could give me an answer on how to fix it.

Users.js

import axios from 'axios';
import React, { useState, useEffect } from 'react';
import UserInfo from './UserInfo';


function Users() {
    const [users, setUsers] = useState(null)
    const [loding, setLoding] = useState(false)
    const [error, setError] = useState(false)


    const [userId, setUserId] = useState(null)

    const fetchUsers = async () => {
        try {
            setUsers(null)
            setError(null);
            setLoding(true)

            const respnse = await axios.get('https://jsonplaceholder.typicode.com/users')

            setUsers(respnse)
        } catch (e) {
            setError(e)
        }
        setLoding(false)
    };

    useEffect(() => {
        fetchUsers();
    }, []);

    if (loding) return <div>loading...</div>
    if (error) return <div>error....</div>
    if (!users) return null;

    return (
        <>
            <ul>
                {
                    users.data.map(user =>
                        <li key={user.id} onClick={() => setUserId(user.id)} >
                            {user.username} ({user.name})
                        </li>
                    )
                }
            </ul>
            <button onClick={fetchUsers}>
                reload
            </button>
            {userId && <UserInfo id={userId} />}
        </>
    );
}

export default Users;

UserInfo.js

import React, { useEffect, useState } from 'react';
import axios from 'axios';

function UserInfo({ id }) {

    const [userInfo, setUserInfo] = useState(null)

    async function getUsersAPI() {
        try {
            const response = await axios.get(`https://jsonplaceholder.typicode.com/users/${id}`)
            setUserInfo(response)
        } catch (e) {

        }
    }

    useEffect(() => {
        getUsersAPI()
    }, [userInfo])


    if (!userInfo) {
        return null;
    }

    const { data } = userInfo

    return (
        <>
            <h2>{data.username}</h2>
            <p>
                <b>email: </b>{data.email}
            </p>
        </>
    );
}

export default UserInfo;
use-effect react-hooks reactjs javascript
3 Answers

It seems like you want id to be a useEffect dependency instead of userInfo.

Otherwise every time userInfo changes the effect will run, it will call getUsersAPI which in turns sets the value of userInfo when axios resolves (thus causing an infinite loop).

    import React, { useEffect, useState } from 'react';
    import axios from 'axios';

    function UserInfo({ id }) {
        const [userInfo, setUserInfo] = useState(null)
        async function getUsersAPI() {
            try {
                const response = await axios.get(`https://jsonplaceholder.typicode.com/users/${id}`)
                setUserInfo(response)
            } catch (e) {}
        }

        useEffect(() => {
            getUsersAPI()
        }, [id])

        if (!userInfo) {
            return null;
        }

        const { data } = userInfo

        return (
            <>
                <h2>{data.username}</h2>
                <p>
                    <b>email: </b>{data.email}
                </p>
            </>
        );
    }

    export default UserInfo;
user_53853810

this problem is due to the fact that you have set userInfo as a dependency for useEffect dependency array! every time this component renders, useEffect will call your API and it changes the value of userInfo, so you encounter with infinite loop!

user_108664530

The problem is in the UserInfo.js file. In these lines:

useEffect(() => {
    getUsersAPI()
}, [userInfo])

You fetch userInfo but then setUserInfo(response) again which cause useEffect to run again.

If might want to leave it as:

useEffect(() => {
    getUsersAPI()
}, [])

So the useEffect only run once. Or you want it to reflect your last userId from props then put userId to the dependency array:

useEffect(() => {
    getUsersAPI()
}, [id])
user_51226150
Related