UseLayoutEffect()

1// This is a React Quiz from BFE.dev 
2
3import * as React from 'react'
4import { useState, useEffect, useLayoutEffect} from 'react'
5import { createRoot } from 'react-dom/client'
6
7function App() {
8  console.log('App')
9  const [state, setState] = useState(0)
10  useEffect(() => {
11    setState(state => state + 1)
12  }, [])
13
14  useEffect(() => {
15    console.log('useEffect 1')
16    return () => {
17      console.log('useEffect 1 cleanup')
18    }
19  }, [state])
20
21  useEffect(() => {
22    console.log('useEffect 2')
23    return () => {
24      console.log('useEffect 2 cleanup')
25    }
26  }, [state])
27
28  useLayoutEffect(() => {
29    console.log('useLayoutEffect')
30    return () => {
31      console.log('useLayoutEffect cleanup')
32    }
33  }, [state])
34
35  return null
36}
37
38const root = createRoot(document.getElementById('root'));
39root.render(<App/>)