`<Suspense>` does not clean up layout effects when suspending again

[szmarczak]

Description

https://react.dev/reference/react/Suspense

If React needs to hide the already visible content because it suspended again, it will clean up layout Effects in the content tree. When the content is ready to be shown again, React will fire the layout Effects again. This ensures that Effects measuring the DOM layout don’t try to do this while the content is hidden.

This does not happen in react-native when using mobile.

React Native Version

0.72.5

Output of npx react-native info

> npx react-native info
info Fetching system and libraries information...
System:
  OS: Windows 10 10.0.22621
  CPU: "(12) x64 AMD Ryzen 5 5600 6-Core Processor              "
  Memory: 16.16 GB / 31.91 GB
Binaries:
  Node:
    version: 20.2.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn: Not Found
  npm:
    version: 9.7.2
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK: Not Found
IDEs:
  Android Studio: AI-222.4459.24.2221.9971841
  Visual Studio:
    - 17.5.33424.131 (Visual Studio Community 2022)
Languages:
  Java:
    version: 11.0.20.1
    path: C:\Program Files\Eclipse Adoptium\jdk-11.0.20.101-hotspot\bin\javac.EXE
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.5
    wanted: 0.72.5
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Steps to reproduce

Run this on mobile.

Snack, screenshot, or link to a repository

https://snack.expo.dev/@szmarczak/adequate-yellow-banana

[cortinico]

snack.expo.dev/@szmarczak/adequate-yellow-banana

Have you tested this on a real device with the New Architecture turned on? Asking as Snacks don't run on the New Architecture.

[szmarczak]

I have run this locally on Android. Doesn't it run the new architecture by default when creating a new project?

[cortinico]

I have run this locally on Android. Doesn't it run the new architecture by default when creating a new project?

Nope it does not. You need to toggle newArchEnabled in your gradle.properties file

[szmarczak]

Still happens.

[cortinico]

Could you upload a repro using the template project:
https://github.com/react-native-community/reproducer-react-native

[github-actions]

⚠️	Missing Reproducible Example
ℹ️	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template

[szmarczak]

Why was the issue tagged Needs: Repro while I have provided the repro in a Snack and explicitly stated that it happens in the new architecture? It took me literally two minutes to clone the repo you mentioned and make the necessary edits. Has the support for the old architecture ended?

Anyway, here you go: https://github.com/szmarczak/-reproducer-react-native-