profile
viewpoint

Ask questionsInfinite 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.

facebook/react

Answer questions eashish93

passing condition in dependency array and checking explicitly is the same thing.

useful!

Related questions

Disable react strict mode on third party libraries hot 7
Warning: Unknown DOM property for. Did you mean htmlFor? hot 6
TypeError: Object(...) is not a function
Refs - &#34;object is not extensible&#34;
React@16.9 block `javascript:void(0);`
Warning: validateDOMNesting(...): <tr> cannot appear as a child of <table> hot 3
"DevTools v4 is incompatible with this version of React" with React Native & latest version of React hot 3
Feedback on useEffect depndencies change error hot 3
[ESLint] Feedback for 'exhaustive-deps' lint rule hot 3
React custom hook "Should have a queue. This is likely a bug in React" error message. hot 2
useEffect causes 'callback is not a function' exception hot 2
DevTools: Updating state or props in devtools does not trigger component update. hot 2
Error on unit test : Cannot read property 'Symbol(Symbol.iterator)' of undefined hot 2
False-positive security precaution warning (`javascript:` URLs) hot 2
Hooks API - hook breaks when exported from module hot 2
source:https://uonfu.com/
Github User Rank List