← All React exercises

React quiz · 29

UseEffect() timing IV

StatusNot taken

Question

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

Code

exercise.tsx
1'infiniteLoopProtection:false'
2
3import * as React from 'react'
4import { useState, useEffect, useLayoutEffect} from 'react'
5import { createRoot } from 'react-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  useLayoutEffect(() => {
25    console.log(5)
26    setState(state => state + 1)
27  }, [])
28
29  return null
30}
31
32const root = createRoot(document.getElementById('root'));
33root.render(<App/>)