fix: schedule delayed freeze with setTimeout to prevent React infinite loop

[kligarski]

Description

When analyzing Test791 in order to create an e2e test for it, I noticed some weird behavior that is probably caused by multiple overlapping issues. This PR addresses one of them - when pushing modals with a header in setInterval from a regular push screen that is not freezed (we prevent freezing it by using freezeOnBlur: false option), only 4 of them are pushed. Then the interval stops and the screens are not being pushed anymore. What is even more interesting, interacting with a button in the modal fixes the issue, sometimes only for one more push, but sometimes it just starts working without any issues.

DelayedFreeze component was introduced in #1220 in order to fix react-navigation's useIsFocused hook and some animation bugs. DelayedFreeze allows one more render before freezing the screen. If we change freeze to true, we still pass previous freezeState (false) to the Freeze component. useEffect runs and uses setImmediate to update the freezeState right after the render. This mechanism works for regular push/card screens but for some unknown reason, it does not work with multiple screens with presentation: 'modal' and headerShown: true (more details below). Changing setImmediate to setInterval(fn, 0) fixes the issue.

EDIT: Seems like the issue happens also in different scenarios with freeze (e.g. #2971). The bug is present only for RN 0.78+, it might be related to React 19.

Fixes #2971.

Details

setImmediate creates a microtask. Microtasks run after a macrotask, before another interation of the event loop. setTimeout is a regular macrotask. Somehow, when using setImmediate in DelayedFreeze, after pushing 4 modal screens with a header, when the first modal gets freezed, an infinite loop of commits is created (you can see the CPU usage go to max, allocated memory increases). Even though each commit has multiple affectedLayoutableNodes, they don't result in any mutations when diffing the trees. These updates probably result in starvation of the function passed to setInterval.

This bug happens with presentation: 'formSheet' as well but not for other types of modals including presentation: 'pageSheet'! This suggests that there is a problem with UIModalPresentationFormSheet (to which UIModalPresentationAutomatic usually resolves to since iOS 18) but not UIModalPresentationPageSheet (which was the default before iOS 18).

Bug mechanism described step-by-step

Please note that react-navigation freezes currently focused screen and one below (this is necessary for animations).

Step 1

Screen	Presentation	Freeze	Details
Home	push	false	We enforce no freeze with freezeOnBlur: false

Step 2

Screen	Presentation	Freeze	Details
Home	push	false	We enforce no freeze with freezeOnBlur: false
Second	modal	false	The modal isFocused so we don't freeze it

Step 3

Screen	Presentation	Freeze	Details
Home	push	false	We enforce no freeze with freezeOnBlur: false
Modal1	modal	false	The modal isBelowFocused so we don't freeze it
Modal2	modal	false	The modal isFocused so we don't freeze it

Step 4

Screen	Presentation	Freeze	Details
Home	push	false	We enforce no freeze with freezeOnBlur: false
Modal1	modal	false	The modal will be freezed after next render (because of DelayedFreeze)
Modal2	modal	false	The modal isBelowFocused so we don't freeze it
Modal3	modal	false	The modal isFocused so we don't freeze it

Step 5

Screen	Presentation	Freeze	Details
Home	push	false	We enforce no freeze with freezeOnBlur: false
Modal1	modal	true
Modal2	modal	false	The modal will be freezed after next render (because of DelayedFreeze)
Modal3	modal	false	The modal isBelowFocused so we don't freeze it
Modal4	modal	false	The modal isFocused so we don't freeze it

This is the moment when infinite loop happens.

Changes

• change setImmediate to setTimeout(fn, 0) in DelayedFreeze
• add Test2963 test screen

Screenshots / GIFs

Before

before_2963_fhd.mov

After

after_2963_fhd.mov

Test code and steps to reproduce

Open Test2963 in example app.

Checklist

• Included code example that can be used to test this change
• Ensured that CI passes

[kkafar]

Okay, did some sanity checks & it seems we're ok.

I do not have much confidence though, since we do not understand why the infinite loop in react is being triggered by calling setImmediate there.

I'm for making an exception here & proceeding with this change. Since it seems that it fixes serious issues.

[G2Jose]

Do you know when this will get published on npm @kligarski @kkafar? I'm running into this issue which might be related #2971 (comment)

[kligarski]

Hi, @G2Jose. Replied to both of your comments related to the issue here: #2971 (comment).