React useEffect порядок срабатывания

Есть вот такой код

 import { useState, useEffect } from "react"; 
 
export const App = () => { 
    const [state, setState] = useState(0); 
    console.log(1); 
 
    useEffect(() => { 
        console.log(2); 
    }, [state]); 
 
    Promise.resolve().then(() => console.log(3)); 
 
    setTimeout(() => console.log(4), 0); 
 
    const onClick = () => { 
        setState((num) => num + 1); 
    }; 
    return ( 
        <div> 
            <button onClick={onClick}>click me</button> 
        </div> 
    ); 
}; 
 

При первом рендере в консоль выводится 1 3 4 2
При нажатии на кнопку 1 2 3 4

Вопрос: почему в первом случае useEffect сработал после промиса и таймера а во втором случае до?

Есть еще вот такой пример

 import { useState, useEffect, useLayoutEffect } from "react"; 
 
export const App = () => { 
    const [state, setState] = useState(0); 
    console.log(1); 
 
    useEffect(() => { 
        console.log(2); 
    }, [state]); 
 
    Promise.resolve().then(() => console.log(3)); 
 
    setTimeout(() => console.log(4), 0); 
 
    useLayoutEffect(() => { 
        console.log(5); 
        setState((state) => state + 1); 
    }, []); 
 
    return null; 
}; 
 

В консоль при первом рендере 1 5 2 1 2 3 4


Я не понимаю логику работы реакта в таких ситуациях. Кто шарит в этом помогите пожалуйста