cf.completefrontend

Predict the outputEasy

What does this profile log and show after you click Rename, then Like?

Rename changes the name of the user object in place, then passes that object to setUser. Like adds one to a separate piece of state. The component logs every render.

What does it log, and what does the page show?
import { useState } from "react";
 
export default function App() {
  const [user, setUser] = useState({ name: "Ada" });
  const [likes, setLikes] = useState(0);
  console.log("render", user.name, likes);
 
  function handleRename() {
    user.name = "Grace";
    setUser(user);
  }
 
  return (
    <>
      <p>Name: {user.name}</p>
      <p>Likes: {likes}</p>
      <button onClick={handleRename}>Rename</button>
      <button onClick={() => setLikes(likes + 1)}>Like</button>
    </>
  );
}

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

  1. You click Rename.
  2. You click Like.

The answer

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

Checking your sign-in…