cf.completefrontend

Predict the outputMedium

How many times does this Effect run after two clicks, when its dependency is an object?

The room never changes. The button only counts clicks. The app isn't in Strict Mode.

What does it log, and what does the page show?
import { useEffect, useState } from "react";
 
export default function App() {
  const [clicks, setClicks] = useState(0);
  const options = { room: "general" };
 
  useEffect(() => {
    console.log("connect", options.room);
    return () => {
      console.log("disconnect", options.room);
    };
  }, [options]);
 
  return <button onClick={() => setClicks(clicks + 1)}>Clicked {clicks} times</button>;
}

It runs in development, rendered as <App />, and then:

  1. You click the button twice.

The answer

Work out every line it logs, in order, and what the page shows at the end. Then check.

Checking your sign-in…