Reactjs – Why useEffect triggered before paint

I understand that one of the distinctions between useEffect and useLayoutEffect is as follows:

• useEffect triggered after paint
• useLayoutEffect triggered before paint and block the browser paint process

However, why does the following useEffect trigger before paint?

1. useEffect triggered before paint

performance.mark('start')
const App = () => {
  useEffect(() => {
    performance.mark('end-useEffect')
    performance.measure('useEffect triggered', 'start', 'end-useEffect');
  }, [])
  return (
    <div>123</div>
  )
}

2. use useEffect and useLayoutEffect together: useEffect triggered after paint

performance.mark('start')
const App = () => {
  useEffect(() => {
    performance.mark('end-useEffect')
    performance.measure('useEffect triggered', 'start', 'end-useEffect');
  }, [])
  useLayoutEffect(() => {
    performance.mark('end-useLayoutEffect')
    performance.measure('useLayoutEffect triggered', 'start', 'end-useLayoutEffect');
  }, [])
  return (
    <div>123</div>
  )
}