{...}
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 />);

{...}
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 />);