useState() quirk (pass rate: 7%)react@18.3.1- powered by jser.pro
{...}
import * as React from "react";
import { useState } from "react";
import { createRoot } from "react-dom/client";
import { screen, fireEvent } from "@testing-library/dom";
function A() {
console.log(2);
return null;
}
function App() {
const [_state, setState] = useState(false);
console.log(1);
return (
<>
<button
onClick={() => {
console.log("click");
setState(true);
}}
data-testid="action"
>
click me
</button>
<A />
</>
);
}
const root = createRoot(document.getElementById("root"));
root.render(<App />);
(async function () {
const action = await screen.findByTestId("action");
fireEvent.click(action);
await wait(100);
fireEvent.click(action);
await wait(100);
fireEvent.click(action);
click the button 3 times
})();
{...}
function wait(duration = 100) {
return new Promise((resolve) => setTimeout(resolve, duration));
}
{...}
import * as React from "react";
import { useState } from "react";
import { createRoot } from "react-dom/client";
import { screen, fireEvent } from "@testing-library/dom";
function A() {
console.log(2);
return null;
}
function App() {
const [_state, setState] = useState(false);
console.log(1);
return (
<>
<button
onClick={() => {
console.log("click");
setState(true);
}}
data-testid="action"
>
click me
</button>
<A />
</>
);
}
const root = createRoot(document.getElementById("root"));
root.render(<App />);
(async function () {
const action = await screen.findByTestId("action");
fireEvent.click(action);
await wait(100);
fireEvent.click(action);
await wait(100);
fireEvent.click(action);
click the button 3 times
})();
{...}
function wait(duration = 100) {
return new Promise((resolve) => setTimeout(resolve, duration));
}
What gets logged in order?

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