The intermediate state of `useLayoutEffect` can be mounted by a commit from a different thread

Description

This issue was brought to our attention through a bug report in reanimated. After some experimenting we realized it can be reproduced in react-native without reanimated - when synchronous stated updates are enabled. I'm not sure what the status of this feature flag is, but I think that this issue will cause troubles for any attempt at performing commits from different threads.

The issue

When there is a render and a useLayoutEffect is called, the tree from the original render should not be painted (as useLayoutEffect blocks paint). This works fine, unless there are updates being committed from a different thread - in that case the paint sometimes won't be blocked, and the user will see the intermediate state. This can happen when we enable the enableSynchronousStateUpdates feature flag - this causes state updates for scrolling to happen immediately on the UI thread. In the reproduction we can see, that the intermediate state gets drawn on the screen only when we scroll. If we disable the enableSynchronousStateUpdates flag it goes back to normal.

https://github.com/user-attachments/assets/6be5b78d-74c0-4c26-91c4-03c4bb765b40

The same happens if we run an infinite reanimated animation in the same example (with our mechanism for pausing reanimated commits disabled):

https://github.com/user-attachments/assets/0b786ab0-2812-4e29-bc9f-78a621bb8c99

Cause

I think this is caused by how useLayoutEffect is implemented. The pre-useLayoutEffect render commit updates the current revision of the ShadowTree without painting it - only after layout effects run, the new tree is painted. This works great, until there is a commit triggered from a different thread. That commit will take the current revision (so in this case the intermediate state that useLayoutEffect should prevent from being painted), apply some changes on top of it, and then mount it. This leads to the user seeing a wrong state for a split-second.

Steps to reproduce

1. Paste the content of the repro to RNTesterPlayground.js
2. Change the enableSynchronousStateUpdates feature flag to true
3. Continuously scroll the list in the example - observe how the intermediate state is shown on the screen

React Native Version

0.80, main, (older ones probably too)

Affected Platforms

Runtime - Android, Runtime - iOS, Other (please specify)

Areas

Fabric - The New Renderer

Output of npx @react-native-community/cli info

info Fetching system and libraries information...
System:
  OS: macOS 15.3.2
  CPU: (14) arm64 Apple M4 Pro
  Memory: 152.27 MB / 24.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.14.0
    path: ~/.nvm/versions/node/v22.14.0/bin/node
  Yarn:
    version: 1.22.19
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.9.2
    path: ~/.nvm/versions/node/v22.14.0/bin/npm
  Watchman:
    version: 2025.03.10.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /Users/bartlomiejbloniarz/.rbenv/shims/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.3 AI-243.26053.27.2432.13536105
  Xcode:
    version: 16.3/16E140
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.14
    path: /opt/homebrew/opt/openjdk@17/bin/javac
  Ruby:
    version: 3.4.2
    path: /Users/bartlomiejbloniarz/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react: Not Found
  react-native: Not Found
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: false
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

-

MANDATORY Reproducer

https://gist.github.com/bartlomiejbloniarz/82ed6aaa6011c8bea32371d779641ff6

Screenshots and Videos

No response

Beginne mit dem obligatorischen Reproducer-Gist und füge ihn in RNTesterPlayground.js ein. Aktiviere enableSynchronousStateUpdates, scrolle kontinuierlich und vergleiche das Ergebnis bei deaktiviertem Flag, während du die beschriebene Interaktion zwischen ShadowTree und useLayoutEffect überprüfst. Fertig ist die Arbeit, wenn Commits von einem anderen Thread nicht mehr dazu führen, dass der Zwischenzustand auf Android und iOS gezeichnet wird.