Endless render API loop

Question

There is an API of friends, and with such code the code endlessly loops, I think this is due to the fact that I do not stop the transmission of responce.result, but I do not know how to fix it

function FriendsAPI(){

const [items, setItems] = useState([1,2,3,4,5,6])
const [loading, setLoading] = useState(false)

useEffect (() =>{
    fetch("https://randomuser.me/api/?results=6&nat=US")
        .then((response) => response.json())
        .then((response) => {
                setItems(response.results)
                setLoading(true)
        })
})
    if(!loading){
        return (
            <div>Loading ...</div>
        )
    }
    else {
        return (
            <div className={classes.WrapperImage}>
                {console.log('render')}
                { items.map((item, index) => (
                    <div className={classes.Pictures} key={index}>
                    <img src={item.picture.medium} alt={item.name.first} className={classes.Img}/>
                    <p>{item.name.first}</p>
                    </div>
                )) }

            </div>
        )
    }
}

When do you want the fetch to run? Just once when the component mounts? — Nicholas Tower
– Nicholas Tower, Commented Feb 16, 2021 at 18:13
Then add an empty dependency array to the effect. useEffect(() => { /* ... */ }, []) — Nicholas Tower
– Nicholas Tower, Commented Feb 16, 2021 at 18:42

FrankSiret · Accepted Answer · 2021-02-16 19:33:45Z

1

in the useEffect add an empty array in the second argument

useEffect (() =>{
    fetch("https://randomuser.me/api/?results=6&nat=US")
        .then((response) => response.json())
        .then((response) => {
                setItems(response.results)
                setLoading(true)
        })
}, [])

That makes it run on componentDidMount

answered Feb 16, 2021 at 19:33

FrankSiret

1868 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Endless render API loop

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related