← All React exercises

React quiz · 28

UseEffect() timing III

StatusNot taken

Question

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

Code

exercise.tsx
1'infiniteLoopProtection:false'
2import * as React from "react";
3import { useState, useEffect } from "react";
4import { createRoot } from "react-dom/client";
5import { screen, fireEvent } from "@testing-library/dom";
6
7function App() {
8  const [state, setState] = useState(0)
9  console.log(1)
10  
11  const start = Date.now()
12  while (Date.now() - start < 50) {
13    window.timestamp = Date.now()
14  }
15
16  useEffect(() => {
17    console.log(2)
18  }, [state])
19
20  Promise.resolve().then(() => console.log(3))
21
22  setTimeout(() => console.log(4), 0)
23
24  const onClick = () => {
25    console.log(5)
26    setState(num => num + 1)
27    console.log(6)
28  }
29  return <div>
30    <button onClick={onClick}>click me</button>
31  </div>
32}
33
34const root = createRoot(document.getElementById('root'));
35root.render(<App/>)
36
37setTimeout(() => fireEvent.click(screen.getByText('click me')), 100)