Infinite loop in useEffect using blank object or array

Using React Version: 16.8.4 When using blank object or array as a setter for function inside useEffect does cause infinite loop. However using string or number does not trigger this. Here’s the minimal example:

function Example() {
  const [count, setCount] = useState(0);
  const [foo, setFoo] = useState({});

  useEffect(() => {
     console.log("Infinite Loop");
     setCount(100);    // doesn't cause infinite loop.
     // but this does
     // setFoo({});   // or setFoo([]);
  });

  return <div />;
}

I don’t know if it’s a bug or default behaviour because in earlier version of react (in v16.7.0-alpha.0), both string and number also causing infinite loop which seems to be fixed in latest one.

[mlandalv]

It seems to behave according to the docs.

If you update a State Hook to the same value as the current state, React will bail out without rendering the children or firing effects.

Both {} and [] creates a new object or array and hence triggers an update. 100 is primitive and doesn’t.

[gaearon]

Re: example in https://github.com/facebook/react/issues/15096#issuecomment-472349151, you can fix it by adding the dependencies argument. (In this case, it’s [] because your effect doesn’t depend on any values from render scope except setCurrentUser which is guaranteed to be stable.)

     function Example() {
        const [currentUser, setCurrentUser] = useState({});
        useEffect(() => {
              const unsub = firebase.auth().onAuthStateChanged(user => {
                  unsub();
                  if(user) setCurrentUser(user);
              });
        }, []) // <--------- I added this
       return <div/>
     }

Note that you should only do it when it’s safe — i.e. when you don’t use any props/state and values derived from them in the effect, and you also don’t call any functions that use those.

See:

• https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects
• https://www.robinwieruch.de/react-hooks-fetch-data/

Hope this helps.

For a deeper dive:

• https://reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies
• https://reactjs.org/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often
• https://reactjs.org/docs/hooks-faq.html#why-am-i-seeing-stale-props-or-state-inside-my-function