cf.completefrontend

Predict the outputMedium

Two callback refs log every call. What does this log when you hide the note and show it again?

What does it log, and what does the page show?
import { useState } from "react";
 
function logNote(node) {
  console.log("note:", node ? node.tagName : null);
}
 
export default function App() {
  const [show, setShow] = useState(true);
 
  return (
    <>
      <button onClick={() => setShow(!show)}>{show ? "Hide" : "Show"} the note</button>
      <h2 ref={(node) => console.log("heading:", node ? node.tagName : null)}>Tea notes</h2>
      {show && <p ref={logNote}>Steep green tea for two minutes.</p>}
    </>
  );
}

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

  1. You click Hide the note.
  2. You click Show the note.

The answer

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

Checking your sign-in…