Discussion on: You (probably) don't need that useState + useEffect

View post

Replies for: I'm new with React and I don't understand why isn't this code triggering an infinite loop ? (we watch for changes in setData and setData is called ...

UPDATE - see follow up below.

Your concern is 100% warranted - useEffect dependencies are often the cause of infinite loop headaches, mainly from objects, arrays, and function expressions.

The set* functions returned from the useHook call reference the same functions between renders. Or, in other words:

[useState and useEffect] are guaranteed to have a stable signature between renders

The following as you pointed out would cause an infinite loop:

// object
const user = {};
useEffect(() => { /* ... */ }, [user]);

const dogs = [];
useEffect(() => { /* ... */ }, [dogs]);

const fetchSomethingCool = () => {};
useEffect(() => { /* ... */ }, [fetchSomethingCool]);

Don Juan Javier • Nov 4 '21

UPDATE - I think that React does some smart memoization for the dependencies, so my analysis is incorrect. The main thing that would cause a useEffect is performing a setState (the same as using one of the set* useState functions) inside of a useEffect, where the state value is part of the dependency array.

This is a good article that outlines some of the pitfalls and how to solve them: dmitripavlutin.com/react-useeffect...