Bug: Components rendered in React.Suspense can't have their size reliably measured

[AndrewBarzu]

Components that are rendered in a React.Suspense, along lazy loaded components don't get their layouts measured correctly. This happens because the measurement is done while the lazy loaded components are still loading, so the fallback is being shown. After the lazy loaded components are loaded and everything is finally painted to the DOM, useEffects/useLayoutEffects/etc are never retriggered, so measurements can never be taken of the components.

A way to circumvent this is to use ResizeObserver, but as by react documentation useEffect should be triggered after painting. However that is wrong in the case of React.Suspense/React.lazy.

React version: 18.2.0

Steps To Reproduce

1. Define a component that does layout measurement using a ref/state/whatever
2. Create a React.Suspense
3. Lazy load a few times that component, and make it take a while to render (500/1000 ms). This can be done with a timeout.
4. The component that takes the longest to render will get correct layout measurements. The rest will be measured incorrectly (have a measurement of 0, since they are measured before they are painted)
5. If all components take the same time to load, they will all get wrong measurements

Link to code example: https://codesandbox.io/s/react-typescript-forked-qbhfwb?file=/src/App.tsx

The current behavior

Measurements are calculated as 0 in useEffect since it triggers before painting, and they are never recomputed in any useEffect/useLayoutEffect after painting to DOM happens.

The expected behavior

useEffect/useLayoutEffect should instead trigger after the DOM has been updated and the React.Suspense has successfully resolved.

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[eps1lon]

I'll check out what's wrong here

[AndrewBarzu]

Hey @eps1lon , do you have any update on this?

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!