CodeParkfunction ChatRoom({ roomId }) {
const [message, setMessage] = useState('');
const options = { serverUrl, roomId };
useEffect(() => {
const conn = createConnection(options);
conn.connect();
return () => conn.disconnect();
}, [options]);
// ...input that calls setMessage
}
After every render, including each keystroke in the message input
It reconnects after every render, including each keystroke. options is a new object on every render. Object.is compares objects by reference, so the dependency always looks changed. Typing calls setMessage, which causes a re-render, which creates a new options.
"Only when roomId changes" is the tempting wrong answer. It would be true if the effect depended on roomId. "Never" is also wrong, because objects are valid dependencies. Fix it by creating the object inside the effect and depending on roomId, a primitive value.