All kinds of effects

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