React quiz - callback

Generally callback could be memoed.

callback (pass rate: 24%)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({ onClick }) {
  console.log("A");
  return (
    <button onClick={onClick} data-testid="button">
      click me
    </button>
  );
});
function App() {
  console.log("App");
  const [state, setState] = useState(0);
  return (
    <div>
      <A
        onClick={() => {
          setState((state) => state + 1);
        }}
      />
    </div>
  );
}
const root = createRoot(document.getElementById("root"));
root.render(<App />);
setTimeout(() => {
  const button = document.querySelector('[data-testid="button"]');
  fireEvent.click(button);
click the button
}, 50);

{...}
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({ onClick }) {
  console.log("A");
  return (
    <button onClick={onClick} data-testid="button">
      click me
    </button>
  );
});
function App() {
  console.log("App");
  const [state, setState] = useState(0);
  return (
    <div>
      <A
        onClick={() => {
          setState((state) => state + 1);
        }}
      />
    </div>
  );
}
const root = createRoot(document.getElementById("root"));
root.render(<App />);
setTimeout(() => {
  const button = document.querySelector('[data-testid="button"]');
  fireEvent.click(button);
click the button
}, 50);

What gets logged in order?

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