React quiz - memo

memo() helps prevent unnecessary renders.

memo (pass rate: 41%)react@18.3.1

{...}
import * as React from "react";
import { memo, useState } from "react";
import { createRoot } from "react-dom/client";
import { fireEvent } from "@testing-library/dom";
const A = memo(function A({ children }) {
  console.log("A");
  return children;
});
const B = memo(function B() {
  console.log("B");
  return null;
});
function App() {
  const [count, setCount] = useState(0);
  const increment = () => setCount((count) => count + 1);
  return (
    <div>
      <button onClick={increment} data-testid="button">
        click me
      </button>
      <A>
        <B />
      </A>
    </div>
  );
}
const root = createRoot(document.getElementById("root"));
root.render(<App />);
setTimeout(() => {
  fireEvent.click(document.querySelector('[data-testid="button"]'));
Click the button
}, 100);

{...}
import * as React from "react";
import { memo, useState } from "react";
import { createRoot } from "react-dom/client";
import { fireEvent } from "@testing-library/dom";
const A = memo(function A({ children }) {
  console.log("A");
  return children;
});
const B = memo(function B() {
  console.log("B");
  return null;
});
function App() {
  const [count, setCount] = useState(0);
  const increment = () => setCount((count) => count + 1);
  return (
    <div>
      <button onClick={increment} data-testid="button">
        click me
      </button>
      <A>
        <B />
      </A>
    </div>
  );
}
const root = createRoot(document.getElementById("root"));
root.render(<App />);
setTimeout(() => {
  fireEvent.click(document.querySelector('[data-testid="button"]'));
Click the button
}, 100);

What gets logged in order?

click on the console.log lines to input your answer.