Infinite Loop while using react hook

Question

I'm learning react for past few days and while using useEffect hook i'm getting infite loop over setting my state variable.

Can anyone tell me what's going on and how to overcome this enter image description here

Here's my code

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

const TodoEntry = () => {

  const [todos, setTodos] = useState('');

  useEffect(() => {
    axios.get('http://localhost:5000/api/todos')
     .then(res => { setTodos(res.data); console.log(todos) })
     .catch(err => console.log(err))
  },[todos]);

  return (
    <div>
      <h1>Todo App</h1>
   </div>
  );
};

export default TodoEntry;

useEffect(() => getTodos(), []); since you only want to do this once, on mount. If you have a linter which throws an error, then you can wrap getTodos in a useCallback to memoize it (not create a new function reference every time we render) and add it back to the dependencies array, or put the getTodos code inside the useEffect hook. — Michael Yaworski
– Michael Yaworski, Commented Jul 13, 2020 at 13:46
@MichaelYaworski not a good idea to skip adding the dependencies in useEffect hook's dependency array — Yousaf
– Yousaf, Commented Jul 13, 2020 at 13:47
@MichaelYaworski Is it safe to omit functions from the list of dependencies? — Yousaf
– Yousaf, Commented Jul 13, 2020 at 13:52

Yousaf · Accepted Answer · 2020-07-13 14:28:40Z

2

Couple of problems in your code:

Since getTodos function is a dependency of useEffect hook, every time state updates, new getTodos function is created which then triggers the useEffect hook.
You don't need to chain then function when using async-await syntax. You can just await the result of axios.get(...).

To fix the first problem of infinite loop, use one of the following options:

Wrap the getTodos function in useCallback hook. For details, see useCallback.

Since, getTodos function calls displayTodos, you will need to wrap it in useCallback hook and add displayTodos in the dependency array of useCallback hook that wraps getTodos function. In my opinion, it is better to just remove the displayTodos function and update the state inside getTodos function
```
const getTodos = useCallback(async () => {
   try {
      const res = await axios.get('http://localhost:5000/api/todos')
      setTodos(res.data);
   } catch(err) {
      console.log(err);
   }
}, [setTodos]);
```
Demo

Put the code inside getTodos inside useEffect hook and remove the getTodos function.

useEffect(() => {
  axios.get("http://localhost:5000/api/todos")
   .then(res => setTodos(res.data))
   .catch(err => console.log(err));

}, [setTodos]);

Demo

edited Jul 13, 2020 at 14:28

answered Jul 13, 2020 at 13:44

Yousaf

29.5k6 gold badges54 silver badges78 bronze badges

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

3 Comments

dnp_akil Over a year ago

Thank you Yousaf, I've tried the second method and got the correct result.

Michael Yaworski Over a year ago

Note that is it safe to omit setTodos from the dependency array since it is a function from the useState hook: reactjs.org/docs/hooks-reference.html#usestate "React guarantees that setState function identity is stable and won’t change on re-renders. This is why it’s safe to omit from the useEffect or useCallback dependency list."

Yousaf Over a year ago

@MichaelYaworski yes it is safe but still i don't mind adding it as a dependency because it keeps me in the habit of not missing the dependencies

Vincent Ramdhanie · Accepted Answer · 2020-07-13 13:43:51Z

0

This is because the dependency list for your useEffect call is a function. You probably meant to add the todos data itself.

  useEffect(() => {
    getTodos();
  },[todos]);

answered Jul 13, 2020 at 13:43

Vincent Ramdhanie

103k23 gold badges143 silver badges196 bronze badges

Collectives™ on Stack Overflow

Infinite Loop while using react hook

2 Answers 2

Demo

Demo

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Demo

Demo

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related