Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
AndrewBarzu opened this issue Nov 10, 2023 · 3 comments
Labels
Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug

Comments

@AndrewBarzu
Copy link

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.

@AndrewBarzu AndrewBarzu added the Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug label Nov 10, 2023
Copy link

github-actions bot commented Apr 5, 2024

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 github-actions bot added the Resolution: Stale Automatically closed due to inactivity label Apr 5, 2024
@eps1lon
Copy link
Collaborator

eps1lon commented Apr 5, 2024

I'll check out what's wrong here

@github-actions github-actions bot removed the Resolution: Stale Automatically closed due to inactivity label Apr 10, 2024
@AndrewBarzu
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug
Projects
None yet
Development

No branches or pull requests

2 participants