Infinite Loop with useEffect - ReactJS

Question

I have a problem when using the useEffect hook, it is generating an infinite loop.

I have a list that is loaded as soon as the page is assembled and should also be updated when a new record is found in "developers" state.

See the code:

  const [developers, setDevelopers] = useState<DevelopersData[]>([]);

  const getDevelopers = async () => {
    await api.get('/developers').then(response => {
      setDevelopers(response.data);
    });
  };
  
  // This way, the loop does not happen
  useEffect(() => {
    getDevelopers();
  }, []);

  // This way, infinte loop
  useEffect(() => {
    getDevelopers();
  }, [developers]);

  console.log(developers)

If I remove the developer dependency on the second parameter of useEffect, the loop does not happen, however, the list is not updated when a new record is found. If I insert "developers" in the second parameter of useEffect, the list is updated automatically, however, it goes into an infinite loop.

What am I doing wrong?

complete code (with component): https://gist.github.com/fredarend/c571d2b2fd88c734997a757bac6ab766

Print:

You mention "the list is not updated when a new record is found" - found where? — AKX
– AKX, Commented Sep 8, 2020 at 18:18
useEffect call => getDeveloppers that change the developpers then use effect trigger , then repeat — Omar Berrami
– Omar Berrami, Commented Sep 8, 2020 at 18:20
@AKX See the image I added to the post. I register a developer in the form on the left, the getDevelopers function, search for registered developers in the database, I would like the list to be updated as soon as a new dev is registered. This works, however, only if I use the developers state as a second parameter, but then the loop happens. — Fred
– Fred, Commented Sep 8, 2020 at 18:29
@Fred Thank you for the clarification. The fact that there is a form that modifies developers locally is crucial here. I'll amend my answer... — AKX
– AKX, Commented Sep 8, 2020 at 18:32
@Fred fyi the term for what you are doing is basically Optimistic UI/Optimistic response. — hyperdrive
– hyperdrive, Commented Sep 8, 2020 at 18:51

AKX · Accepted Answer · 2020-09-08 18:39:21Z

The dependencies for useEffect use reference equality, not deep equality. (If you need deep equality comparison for some reason, take a look at use-deep-compare-effect.)

The API call always returns a new array object, so its reference/identity is not the same as it was earlier, triggering useEffect to fire the effect again, etc.

Given that nothing else ever calls setDevelopers, i.e. there's no way for developers to change unless it was from the API call triggered by the effect, there's really no actual need to have developers as a dependency to useEffect; you can just have an empty array as deps: useEffect(() => ..., []). The effect will only be called exactly once.

EDIT: Following the comment clarification,

I register a developer in the form on the left [...] I would like the list to be updated as soon as a new dev is registered.

This is one way to do things:

The idea here is that developers is only ever automatically loaded on component mount. When the user adds a new developer via the AddDeveloperForm, we opportunistically update the local developers state while we're posting the new developer to the backend. Whether or not posting fails, we reload the list from the backend to ensure we have the freshest real state.

const DevList: React.FC = () => {
  const [developers, setDevelopers] = useState<DevelopersData[]>([]);

  const getDevelopers = useCallback(async () => {
    await api.get("/developers").then((response) => {
      setDevelopers(response.data);
    });
  }, [setDevelopers]);

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

  const onAddDeveloper = useCallback(
    async (newDeveloper) => {
      const newDevelopers = developers.concat([newDeveloper]);
      setDevelopers(newDevelopers);
      try {
        await postNewDeveloperToAPI(newDeveloper); // TODO: Implement me
      } catch (e) {
        alert("Oops, failed posting developer information...");
      }
      getDevelopers();
    },
    [developers],
  );

  return (
    <>
      <AddDeveloperForm onAddDeveloper={onAddDeveloper} />
      <DeveloperList developers={developers} />
    </>
  );
};

Worked perfectly! Now I understand the concept! I will study more about the Hooks, they are very interesting. Thank you!

Sam · Accepted Answer · 2020-09-08 18:20:23Z

0

The problem is that your getDevelopers function, calls your setDevelopers function, which updates your developers variable. When your developers variable is updated, it triggers the useEffect function

  useEffect(() => {
    getDevelopers();
  }, [developers]);

because developers is one of the dependencies passed to it and the process starts over.

Every time a variable within the array, which is passed as the second argument to useEffect, gets updated, the useEffect function gets triggered

answered Sep 8, 2020 at 18:20

Sam

2,34517 gold badges102 silver badges217 bronze badges

Comments

Manish Juriani · Accepted Answer · 2020-09-08 18:27:38Z

0

Use an empty array [] in the second parameter of the useEffect. This causes the code inside to run only on mount of the parent component.

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

edited Sep 8, 2020 at 18:27

answered Sep 8, 2020 at 18:21

Manish Juriani

485 bronze badges

1 Comment

AKX Over a year ago

The code doesn't run on unmount. If you return a function from useEffect, that would be run on unmount.

Collectives™ on Stack Overflow

Infinite Loop with useEffect - ReactJS

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related