cf.completefrontend

Predict the outputHard

A stateful panel renders children and a render prop: which components render when it toggles?

App gives Panel a Passed element as children and a renderFooter function that returns a Footer element. Panel keeps its own open state. No component is wrapped in memo.

What does it log, and what does the page show?
import { useState } from "react";
 
function Passed() {
  console.log("Passed render");
  return <p>Passed as children</p>;
}
 
function Footer() {
  console.log("Footer render");
  return <p>From a render prop</p>;
}
 
function Panel({ children, renderFooter }) {
  const [open, setOpen] = useState(false);
  console.log("Panel render", open);
 
  return (
    <section>
      <button onClick={() => setOpen(!open)}>{open ? "Close" : "Open"}</button>
      <div style={{ opacity: open ? 1 : 0.5 }}>{children}</div>
      {renderFooter()}
    </section>
  );
}
 
export default function App() {
  console.log("App render");
  return <Panel renderFooter={() => <Footer />}><Passed /></Panel>;
}

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

  1. You click Open.
  2. You click Close.

The answer

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

Checking your sign-in…