Adding an array in the useEffect dependency array causes an infinte loop

Question

Simple to-do app that lists my tasks and allows me to submit new ones. Connected to a REST API i built and so the tasks are retrieved using a call to that API. Im using useEffect to get all the tasks and store them in a tasks array. This should run every time the array changes (whhen i add a new task, when i delete a task, etc) so i dont have to refresh to see the changes.

useEffect code:

   const [tasks, setTasks] = useState([])
   useEffect(() => { 
        axios.get("http://localhost:8000/api/task-list")
        .then(response => {
            setTasks(response.data)
        })
        .catch(error => {
            console.log(error)
        })
        
    }, [tasks])

Problem now is that theres near infinite calls to my API. It runs indefinitely and not only when the tasks array changes. I think this has something to do with it checking tasks === tasks and them not being the exact same like they seem. But Im not sure.

I'd really appreciate any help cuz I cant just continue like this while making infinite API calls. It only works now cuz the API is mine.

Adithya · Accepted Answer · 2020-12-26 07:12:27Z

2

if you have tasks in dependency array, then the effect is called whenever tasks changes.

Since you are updating tasks within the effect , it triggers the same effect again. and on and on it goes.

You need to have empty array as dependencies if you want to run it only once, and if its depends on some state, add that.

whats the purpose of having [tasks] as dependency?

Since you can only modify tasks with setTasks it doesn't make sense to have it as dependency. usualy you'll have some other state change (like the press of a button) which should update the tasks.

take a look into the docs for useEffect behavior

edited Dec 26, 2020 at 7:12

answered Dec 26, 2020 at 7:07

Adithya

1,7281 gold badge11 silver badges18 bronze badges

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

1 Comment

Saif eldeen Adel Over a year ago

omg. Yeah I was aware of this behaviour but i couldnt leave the dependency array empty cuz i thought thats the only way i can set my tasks back. But holy shit im dumb, like you said i can run my setTasks after the button click and not just inside the useEffect. My apologies

Margherita Lazzarini · Accepted Answer · 2020-12-26 07:24:47Z

It's a loop: your effect runs every time tasks changes. The effect itself modifies tasks array, so it runs again, etc.

You should run it just once, when the component mounts, and you can achieve this with an empty array of dependencies:

useEffect(() => { 
        axios.get("http://localhost:8000/api/task-list")
        .then(response => {
            setTasks(response.data)
        })
        ...
        
    }, [])

Then you have to create function callbacks to events that delete/add elements to your list. For example:

const addTask = () => {
  const newTask = ... // the value of your new task, eg. got from an input, ...
  setTasks(prevTasks => prevTasks.push(newTask));
};
...
<Button onClick={addTask}> Add it! </Button>

Collectives™ on Stack Overflow

Adding an array in the useEffect dependency array causes an infinte loop

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related