← All React exercises

React quiz · 24

UseEffect() timing

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, useEffect } from "react";
3import { createRoot } from "react-dom/client";
4import { screen, fireEvent } from "@testing-library/dom";
5
6function App() {
7  const [state, setState] = useState(0)
8  console.log(1)
9
10  useEffect(() => {
11    console.log(2)
12  }, [state])
13
14  Promise.resolve().then(() => console.log(3))
15
16  setTimeout(() => console.log(4), 0)
17
18  const onClick = () => {
19    console.log(5)
20    setState(num => num + 1)
21    console.log(6)
22  }
23  return <div>
24    <button onClick={onClick}>click me</button>
25  </div>
26}
27
28const root = createRoot(document.getElementById('root'));
29root.render(<App/>)
30
31setTimeout(() => fireEvent.click(screen.getByText('click me')), 100)