Lazily loaded component never loads if there's another expensive component in the tree
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 127k
- Forks
- 25.3k
- Avg merge
- 1d 23h
- Merged PRs (30d)
- 4
Description
Description
This is an issue for mostly Android devices (although we have recorded neverending fallbacks on iOS as well) and in the linked Snack it can be easily reproduced if you run it on Android.
Basically if some aspect of your app is "slow" (this is vague because I don't fully understand it, but basically if it's got a complex tree, expensive useMemo comparisons, etc) then lazy loading a react component with React.lazy and import('...') will just never happen.
The component does show up on hot reload, or if (as an example) you have a counter app on the page as well and interact with increment/decrement buttons, but otherwise it never shows up.
This is especially problematic when using React Navigation if the screen components themselves are lazily loaded: the user navigates to a new screen, but the screen is blank (or whatever loading screen is used for the React.lazy fallback) and the new screen just never loads so it feels like their app is broken.
Steps to reproduce
- Have an expensive or poorly optimized component in your app
- Navigate to a route that's lazy loaded (or just render a lazily loaded component)
- Observe that it never renders, provided that your expensive component is expensive enough
React Native Version
0.82.0
Affected Platforms
Runtime - Android
Output of npx @react-native-community/cli info
Output from my repo (but I also made a repro in RN 0.82, so I used that version in the other field):
System:
OS: macOS 15.2
CPU: (12) arm64 Apple M3 Pro
Memory: 170.33 MB / 36.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 22.14.0
path: ~/.local/share/mise/installs/node/22.14.0/bin/node
Yarn:
version: 1.22.22
path: /opt/homebrew/bin/yarn
npm:
version: 10.9.2
path: ~/.local/share/mise/installs/node/22.14.0/bin/npm
Watchman: Not Found
Managers:
CocoaPods:
version: 1.15.2
path: /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 24.4
- iOS 18.4
- macOS 15.4
- tvOS 18.4
- visionOS 2.4
- watchOS 11.4
Android SDK: Not Found
IDEs:
Android Studio: 2024.2 AI-242.23726.103.2422.12816248
Xcode:
version: 16.3/16E140
path: /usr/bin/xcodebuild
Languages:
Java:
version: 21.0.4
path: /usr/bin/javac
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli":
installed: 18.0.0
wanted: ^18.0.0
react:
installed: 19.0.0
wanted: 19.0.0
react-native:
installed: 0.79.5
wanted: 0.79.5
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: true
newArchEnabled: true
Stacktrace or Logs
There's no visible error
MANDATORY Reproducer
https://snack.expo.dev/@afehrws/infinitely-long-lazy-load
Screenshots and Videos
Here's a recording from the Snack so you know what to expect:
https://github.com/user-attachments/assets/aad10550-efb6-4fd0-b846-292079aae763
It's not just that it's slow to load, it really never loads no matter how long you wait.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Run the mandatory Snack reproducer on Android with an expensive component and a React.lazy import, then compare behavior with and without the expensive tree. Trace the React.lazy loading path and determine why the fallback never resolves; done means the lazy component renders reliably without requiring hot reload or unrelated interaction.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- android, javascript, react-native
- Domain
- mobile, performance
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100