useLayoutEffect executes prematurely within Suspense

[ryancogswell]

Do you want to request a feature or report a bug?
This is a bug.

What is the current behavior?
If two components are within React.Suspense and the first uses useLayoutEffect and the second is lazy loaded, useLayoutEffect for the first component is executing before it has been fully rendered to the DOM. If it tries to get its own height via a ref, it gets zero.
This issue began as a question on StackOverflow: https://stackoverflow.com/questions/54720741/react-hooks-lazy-loading-breaks-uselayouteffect
My answer on that question may add a little more context, but I have tried to include the important details here.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:
This sandbox demonstrates the bug: https://codesandbox.io/s/40kw74nyk9
This sandbox shows a hackish workaround further demonstrating the timing of what is occurring: https://codesandbox.io/s/2v9l70r9o0
In the examples AppBarHeader is the component for which we want the height via a ref within useLayoutEffect and Counter is the lazy-loaded sibling. In the second example, I get it to "work" by triggering a re-render of AppBarHeader via useLayoutEffect in Counter.

What is the expected behavior?
useLayoutEffect should not execute until the element is fully rendered in the DOM such that its height can be successfully obtained.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React 16.8.2 (also verified behavior in 16.8.0)
I don't believe the issue is browser-specific. I've reproduced it on Chrome, Firefox, and Edge.

[gaearon]

Do you observe the same problem with componentDidMount?

[ryancogswell]

Yes, componentDidMount behaves the same way (and I had previously verified that useEffect has the same issue as useLayoutEffect), so this is not specific to hooks.
Here is a sandbox that reproduces the issue using componentDidMount (in AppBarHeaderClass.js): https://codesandbox.io/s/p95x6mo6oq

[gaearon]

This sounds like #14536 then.