UI updates made from layout effect are flushed in separate UI transaction about react-native

[cortinico]

Thanks for the extremely detailed report @kmagiera

So there are a number of things at play here. We're aware that useLayoutEffect doesn't work correctly in the New Architecture till 0.74 (included).

The reason behind this is that in order for useLayoutEffect to effectively be blocking the rendering on native, we needed a series of changes inside the runtime scheduler (i.e. we needed an API to synchronously block the rendering on native).

Those changes have now landed on main and we expect useLayoutEffect to work correctly in 0.75. Ideally, you should be able to test your changes on the latest react-native@nightly and it should work correctly.

However, I've tested it and I've realized the current implementation is broken, and we'll have to fix it (thanks to your report we were able to spot this early on!). I'm coordinating with @sammy-SC on how we can fix this thing forward, and ideally have a nightly version where useLayoutEffect works correctly.

I haven't fully investigated why it seems to work correctly on old arch as useLayoutEffect should have been broken on both archs.

[kmagiera]

I just tested this on Android and there's also similar difference on Android with and w/o Fabric. Attaching video from Android with fabric where you can also see red background flashes:
android-fabric.webm

[github-actions]

⚠️	Add or Reformat Version Info
ℹ️	We could not find or parse the version number of React Native in your issue report. Please use the template, and report your version including major, minor, and patch numbers - e.g. 0.70.2

[cortinico]

Hey all,
I'd like to provide a small update here.

As mentioned in my previous update, the useLayoutEffect is known to be broken in 0.74 RCs. The correct behavior is fixed on main for iOS and we're discussing about including it in 0.74.1 to unblock libraries and partners.

So if you test your reproducer against react-native@nightly, you will see that it's fixed.

However, I've tested it and I've realized the current implementation is broken, and we'll have to fix it (thanks to your report we were able to spot this early on!).

For Android the situation is more complicated, as we realized that view preallocation is conflicting with the recent changes that were supposed to fix useLayoutEffect in the New Architecture. We do have a couple of alternatives here (see #44144 for more context) and we're discussing which one to go forward and include in 0.74.1 to fix this behavior for Android as well.