cf.completefrontend

Predict the outputEasy

What does this chat room log when you switch rooms?

Room logs every render, every Effect setup, and every cleanup. The app isn't in Strict Mode.

What does it log, and what does the page show?
import { useEffect, useState } from "react";
 
function Room({ roomId }) {
  console.log("render", roomId);
 
  useEffect(() => {
    console.log("connect", roomId);
    return () => {
      console.log("disconnect", roomId);
    };
  }, [roomId]);
 
  return <h1>Room: {roomId}</h1>;
}
 
export default function App() {
  const [roomId, setRoomId] = useState("general");
  return (
    <>
      <Room roomId={roomId} />
      <button onClick={() => setRoomId("travel")}>Switch to travel</button>
    </>
  );
}

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

  1. You click Switch to travel once.

The answer

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

Checking your sign-in…