🎯 React-разминка!

Всем привет!
Давайте сегодня попробуем решить интересную задачку 🔍

import * as React from 'react'
import { useState, useEffect, useLayoutEffect, useInsertionEffect } from 'react'
import { createRoot } from 'react-dom/client'

function App() {
  console.log(1)
  const [state, setState] = useState(0)

  useEffect(() => {
    setState(state => state + 1)
  }, [])

  useEffect(() => {
    console.log(2)
    return () => {
      console.log(3)
    }
  }, [state])

  useEffect(() => {
    console.log(4)
    return () => {
      console.log(5)
    }
  }, [state])

  useLayoutEffect(() => {
    console.log(6)
    return () => {
      console.log(7)
    }
  }, [state])

  useInsertionEffect(() => {
    console.log(8)
    return () => {
      console.log(9)
    }
  }, [state])

  console.log(10)
  return null
}

const root = createRoot(document.getElementById('root'))
root.render(<App/>)

📌 Вопрос: в каком порядке выведутся `console.log()`?
Пишите свои версии в комментариях!

🧠 Вечером выложу разбор с объяснением + ссылку на задачу, где можно засабмитить своё решение.