← All React exercises

React quiz · 22

UseState()

StatusNot taken

Question

What does the code snippet to the right output by console.log?

Code

exercise.tsx
1import * as React from "react";
2import { useState } from "react";
3import { createRoot } from "react-dom/client";
4import { screen, fireEvent } from "@testing-library/dom";
5
6function A() {
7  console.log('render A')
8  return null
9}
10
11function App() {
12  const [_state, setState] = useState(false)
13  console.log('render App')
14  return <div>
15    <button onClick={() => {
16      console.log('click')
17      setState(true)
18    }}>click me</button>
19    <A />
20  </div>
21}
22
23const root = createRoot(document.getElementById("root"));
24root.render(<App />);
25
26(async function () {
27  const action = await screen.findByText("click me");
28  fireEvent.click(action);
29  await wait(100);
30  fireEvent.click(action);
31  await wait(100);
32  fireEvent.click(action);
33})();
34
35function wait(duration = 100) {
36  return new Promise((resolve) => setTimeout(resolve, duration));
37}