React · Middle · Question 12 of 75

Why does this effect run after every render?

const options = { roomId, serverUrl };

useEffect(() => {
  const conn = connect(options);
  return () => conn.close();
}, [options]);

✓Correct answer: options is a new object on every render
2Objects in dependencies always re-run the effect
3Because connect is an async function returning a promise

Explanation

Dependencies are compared via Object.is, and a new object literal never equals the previous one. The right way is to create the object inside the effect and depend on primitives: [roomId, serverUrl]. Suppressing the linter is a bad idea.

Why does this effect run after every render?

Explanation

Further reading

Problem with a question

Test yourself