react icon indicating copy to clipboard operation
react copied to clipboard

Bug: <Suspense> with a lazy() Component loads forever

Open Jens-n11 opened this issue 9 months ago • 6 comments

Version

"react": "19.1.0", "react-dom": "19.1.0"

OS: Ubuntu 24.04 and MacOS 15.3.2

Overview

Our React-App uses Icons which are lazy() loaded and surrounded by a <Suspense>. We are now seeing issues for components using one of the Icons when also a state is updated within a useEffect(). While updating from React 18.3.1 to React 19.1.0 a few of our tests are running forever (infinite loop?). We were able to narrow it down to the React upgrade and created a minimal test case for this.

Related Issues

#29930: [React 19] infinite loop when using React lazy & functional formAction together

Steps To Reproduce

  1. Open CodeSandbox (Or use the GitHub backup: https://github.com/Jens-n11/react-bug-suspense)
  2. Download the code
  3. Run yarn install
  4. Run yarn test:only-hanging
  5. Will load forever

Image

Cases where the bug does not happen:

  • Using React 18.3.1 instead of 19
  • When rendering less than 3 Icons
  • When running all tests (so having a working test-case right before) yarn test:all
  • Doing no state update from the useEffect

Jens-n11 avatar Apr 25 '25 14:04 Jens-n11

Hi @eps1lon, you could already help within a related issue with lazy() . Do you have some input here as well? 🙂

Jens-n11 avatar Apr 30 '25 12:04 Jens-n11

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] avatar Sep 02 '25 15:09 github-actions[bot]

Seems to work just fine in the CodeSandbox:

https://github.com/user-attachments/assets/7e812ced-ed76-4f8b-b466-793d60554468

Maybe there's something mocking timers in your Vitest suite? React Testing Library currently doesn't integrate with fake timers in Vitest.

eps1lon avatar Sep 02 '25 15:09 eps1lon

Hey @eps1lon, thanks for looking into this issue. We don't have any mocked timers in our Vitest suite. The bug does not occur in the ui, but only when executing the tests. Do you have any further ideas what to check?

Jens-n11 avatar Sep 02 '25 17:09 Jens-n11

I'm encountering this issue too @Jens-n11.

If anyone wishes to see this in a UI, then you can move the components to Storybook and run interaction tests there.

Just a warning that this will cause your browser tab to become unresponsive.

JRIngram avatar Nov 25 '25 10:11 JRIngram

@Jens-n11 @eps1lon upgrading to React 19.2 (from React 19.1) has actually resolved this for me.

JRIngram avatar Nov 28 '25 17:11 JRIngram