Infinate loop with fetching data in UseEffect

Question

Having a weird issue where by i am fetching some data from my local api, and it is infinately calling it for some strange reason:

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

const Users = () => {
    const [users, setUsers] = useState([])

    const fetchUsers = async () => {
        try {
            await fetch('http://localhost:3001/users')
            .then(response => response.json())
            .then(data => setUsers(data));
        }
        catch(ex) {
            console.error('ex:', ex);
        }
    }
    useEffect(() => {
        fetchUsers();
    }, [users])

   return <div>xxx</div>
}

export default Users;

If I console.log(data) instead of setUsers(data), then all seems to be fine and the console log only outputs 1 set of information.

I am unsure what I am doing wrong. Any ideas?

Remove users as a dependency of useEffect. You don't need it, and this causes the infinite loop. — Ori Drori
– Ori Drori, Commented Apr 2, 2021 at 20:26

nathan hayfield · Accepted Answer · 2021-04-02 20:26:55Z

3

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

should be:

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

The first will fetch users every time user changes. then it changes the users object with the results which causes the infinite loop.

The fix instead only calls it once on mount.

answered Apr 2, 2021 at 20:26

nathan hayfield

2,7051 gold badge20 silver badges29 bronze badges

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

Comments

Akif Hadziabdic · Accepted Answer · 2021-04-02 20:35:40Z

1

Your effect:

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

will be executed whenever someone changes users object. In this case, the first time you will call useEffect, and fetch data from API, when you receive data from the backend you will update users object and trigger an infinite loop.

You can solve problem with:

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

edited Apr 2, 2021 at 20:35

answered Apr 2, 2021 at 20:26

Akif Hadziabdic

2,9181 gold badge17 silver badges27 bronze badges

Collectives™ on Stack Overflow

Infinate loop with fetching data in UseEffect

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related