You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
Define a component that does layout measurement using a ref/state/whatever
Create a React.Suspense
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.
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)
If all components take the same time to load, they will all get wrong measurements
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.
The text was updated successfully, but these errors were encountered:
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!
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
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.
The text was updated successfully, but these errors were encountered: