react / react/react-native

Lazily loaded component never loads if there's another expensive component in the tree

Open
#54,173 4 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Issue: Author Provided Repro Needs: React Native Team Attention Platform: Android
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
  1. Have an expensive or poorly optimized component in your app
  2. Navigate to a route that's lazy loaded (or just render a lazily loaded component)
  3. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.