As I understand it, React executes useLayoutEffect before printing DOM in browser, and useEffect executes after it. For example consider this component:

const App = () => {
  useLayoutEffect(() => {
    console.log(document.body.scrollHeight); // shows 1024
  }, [])

  useEffect(() => {
    console.log(document.body.scrollHeight); // shows 1024
  }, [])

  return (
    <div style={{ height: 1024 }}></div>
  )
}

I expected, it show 0 for useLayoutEffect and 1024 for useEffect, but both show 1024

I thought <div style={{ height: 1024 }}></div> print after useLayoutEffect but apparently it's not correct...???