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

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.

Ejecuta el reproductor obligatorio de Snack en Android con un componente costoso y una importación de React.lazy, y compara después el comportamiento con y sin el árbol costoso. Rastrea la ruta de carga de React.lazy y determina por qué el fallback nunca se resuelve; el trabajo estará terminado cuando el componente lazy se renderice de forma fiable sin requerir hot reload ni una interacción no relacionada.