cf.completefrontend

Predict the outputEasy

Two memo badges, one with an inline style object: what logs when the parent updates twice?

Both badges are wrapped in memo. The first gets its style as an object written inline; the second gets an object made once, outside the component. Each badge and App log when they render.

What does it log, and what does the page show?
import { memo, useState } from "react";
 
const Badge = memo(function Badge({ label, style }) {
  console.log("Badge render", label);
  return <p style={style}>{label}</p>;
});
 
const bold = { fontWeight: "bold" };
 
export default function App() {
  const [count, setCount] = useState(0);
  console.log("App render", count);
 
  return (
    <>
      <Badge label="inline" style={{ fontWeight: "bold" }} />
      <Badge label="shared" style={bold} />
      <button onClick={() => setCount(count + 1)}>Clicked {count}</button>
    </>
  );
}

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

  1. You click the button twice.

Practice it in the editor, with tests

The answer

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

Checking your sign-in…