Memory Leak and Performance Issues with freezeOnBlur in Bottom Tab Navigation

[enestatli]

Description

When using freezeOnBlur: true (or enableFreeze(true)) with React Navigation's bottom tab navigator, significant memory leaks occur along with severe JavaScript thread performance degradation. JS FPS drops from 60 to 20-40 FPS when navigating between tabs.

Expected Behavior

• Memory should remain stable when switching between frozen tabs
• JS FPS should maintain 60 FPS or close to it
• No memory leaks should occur

Actual Behavior

• Memory continuously increases with each tab switch
• JS FPS drops to 20-40 FPS and stays low
• Performance degrades over time

Additional Information

• Issue appears to be related to the number of tabs: Memory leak and performance issues occur when there are more than 3 tabs. Testing with 3 or fewer tabs did not reproduce the issue (needs further confirmation)

Steps to reproduce

1. Create a bottom tab navigator with freezeOnBlur: true
2. Navigate between tabs multiple times
3. Monitor memory usage and JS thread performance
4. Observe memory increasing and FPS dropping significantly

Snack or a link to a repository

https://snack.expo.dev/@enestatli65/memory-leak-bottom-tabs

Screens version

4.11.1

React Native version

0.79.2

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo bare workflow

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

No response

Acknowledgements

Yes

[enestatli]

Update: Found something interesting

I was digging deeper into this and created a snack to test the navigation behavior: https://snack.expo.dev/@enestatli65/loop-stop-working

When using freezeOnBlur: true, navigation completely breaks after trying to navigate to a 3rd tab:

Works fine:

const routes = ['#1', '#2']; // Loop works perfectly

Breaks:

const routes = ['#1', '#2', '#3']; // Gets stuck at #3

Here's the scary part: Even the console.log stops executing when it tries to navigate to #3. This suggests the entire JavaScript thread is being blocked or crashed by the freeze mechanism, not just navigation.

So it seems like there's a hard limit of 2 frozen screens, and trying to freeze a 3rd screen completely kills the JavaScript execution. This might explains why the memory leak only happens with 3+ tabs - the freeze mechanism literally can't handle more than 2 screens without crashing.

[kligarski]

Hi, @enestatli. Thank you for reporting the issue. Can you check if applying changes to DelayedFreeze.tsx from #2963 fixes the problem?

[G2Jose]

Hey - I ran into this exact same problem! Memory usage shoots through the roof in a straight line when I use freezeOnBlur: true

Left open it eventually gets killed because of low memory:

Thread 1: EXC_RESOURCE (RESOURCE_TYPE_MEMORY: high watermark memory limit exceeded) (limit=3072 MB)

I've also seen another error hit, the exact text for which I don't have handy. It was something about react hitting the maximum number of times it can try to reconcile layouts (something like 1024).

EDIT: This is the specific assertion that fails https://github.com/facebook/react-native/blob/main/packages/react-native/ReactCommon/react/renderer/mounting/ShadowTree.cpp#L250

react-freeze@npm:1.0.3
@react-navigation/bottom-tabs@npm:7.3.4

[G2Jose]

Hi, @enestatli. Thank you for reporting the issue. Can you check if applying changes to DelayedFreeze.tsx from #2963 fixes the problem?

This doesn't seem to be helping in my scenario @kligarski.

Here's the patch I applied:

diff --git a/lib/commonjs/components/helpers/DelayedFreeze.js b/lib/commonjs/components/helpers/DelayedFreeze.js
index 50f9df572e09b4a4bd0e6bb558f7a3c33cbc05e2..97f26dd599be1e9ee82c058dcf8474f7c46ec9c4 100644
--- a/lib/commonjs/components/helpers/DelayedFreeze.js
+++ b/lib/commonjs/components/helpers/DelayedFreeze.js
@@ -16,11 +16,11 @@ function DelayedFreeze({
   // flag used for determining whether freeze should be enabled
   const [freezeState, setFreezeState] = _react.default.useState(false);
   _react.default.useEffect(() => {
-    const id = setImmediate(() => {
+    const id = setTimeout(() => {
       setFreezeState(freeze);
-    });
+    }, 0);
     return () => {
-      clearImmediate(id);
+      clearTimeout(id);
     };
   }, [freeze]);
   return /*#__PURE__*/_react.default.createElement(_reactFreeze.Freeze, {
diff --git a/lib/commonjs/components/helpers/DelayedFreeze.js.map b/lib/commonjs/components/helpers/DelayedFreeze.js.map
index 4059857e7acef5f0749876e0380a9073f91de894..05c78cba8da0c06b3665b19d9eab2c422d7477ca 100644
--- a/lib/commonjs/components/helpers/DelayedFreeze.js.map
+++ b/lib/commonjs/components/helpers/DelayedFreeze.js.map
@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactFreeze","e","__esModule","default","DelayedFreeze","freeze","children","freezeState","setFreezeState","React","useState","useEffect","id","setImmediate","clearImmediate","createElement","Freeze","_default","exports"],"sourceRoot":"../../../../src","sources":["components/helpers/DelayedFreeze.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAAsC,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAOtC;AACA;AACA,SAASG,aAAaA,CAAC;EAAEC,MAAM;EAAEC;AAA6B,CAAC,EAAE;EAC/D;EACA,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAC,KAAK,CAAC;EAE3DD,cAAK,CAACE,SAAS,CAAC,MAAM;IACpB,MAAMC,EAAE,GAAGC,YAAY,CAAC,MAAM;MAC5BL,cAAc,CAACH,MAAM,CAAC;IACxB,CAAC,CAAC;IACF,OAAO,MAAM;MACXS,cAAc,CAACF,EAAE,CAAC;IACpB,CAAC;EACH,CAAC,EAAE,CAACP,MAAM,CAAC,CAAC;EAEZ,oBAAOR,MAAA,CAAAM,OAAA,CAAAY,aAAA,CAACf,YAAA,CAAAgB,MAAM;IAACX,MAAM,EAAEA,MAAM,GAAGE,WAAW,GAAG;EAAM,GAAED,QAAiB,CAAC;AAC1E;AAAC,IAAAW,QAAA,GAAAC,OAAA,CAAAf,OAAA,GAEcC,aAAa","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactFreeze","e","__esModule","default","DelayedFreeze","freeze","children","freezeState","setFreezeState","React","useState","useEffect","id","setTimeout","clearTimeout","createElement","Freeze","_default","exports"],"sourceRoot":"../../../../src","sources":["components/helpers/DelayedFreeze.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAAsC,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAOtC;AACA;AACA,SAASG,aAAaA,CAAC;EAAEC,MAAM;EAAEC;AAA6B,CAAC,EAAE;EAC/D;EACA,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGC,cAAK,CAACC,QAAQ,CAAC,KAAK,CAAC;EAE3DD,cAAK,CAACE,SAAS,CAAC,MAAM;IACpB,MAAMC,EAAE,GAAGC,YAAY,CAAC,MAAM;MAC5BL,cAAc,CAACH,MAAM,CAAC;IACxB,CAAC,CAAC;IACF,OAAO,MAAM;MACXS,cAAc,CAACF,EAAE,CAAC;IACpB,CAAC;EACH,CAAC,EAAE,CAACP,MAAM,CAAC,CAAC;EAEZ,oBAAOR,MAAA,CAAAM,OAAA,CAAAY,aAAA,CAACf,YAAA,CAAAgB,MAAM;IAACX,MAAM,EAAEA,MAAM,GAAGE,WAAW,GAAG;EAAM,GAAED,QAAiB,CAAC;AAC1E;AAAC,IAAAW,QAAA,GAAAC,OAAA,CAAAf,OAAA,GAEcC,aAAa","ignoreList":[]}
diff --git a/lib/module/components/helpers/DelayedFreeze.js b/lib/module/components/helpers/DelayedFreeze.js
index 57f2bb37e376a4aca5079e437f59e3e330a168c0..06f08d02c183b022883a244e0a495383f39631b9 100644
--- a/lib/module/components/helpers/DelayedFreeze.js
+++ b/lib/module/components/helpers/DelayedFreeze.js
@@ -9,11 +9,11 @@ function DelayedFreeze({
   // flag used for determining whether freeze should be enabled
   const [freezeState, setFreezeState] = React.useState(false);
   React.useEffect(() => {
-    const id = setImmediate(() => {
+    const id = setTimeout(() => {
       setFreezeState(freeze);
-    });
+    }, 0);
     return () => {
-      clearImmediate(id);
+      clearTimeout(id);
     };
   }, [freeze]);
   return /*#__PURE__*/React.createElement(Freeze, {
diff --git a/lib/module/components/helpers/DelayedFreeze.js.map b/lib/module/components/helpers/DelayedFreeze.js.map
index 6dc7690bd0a5cc284314b56b9b85d46d1f6b573b..8338460fc94d128dbd855b2241c94dce57cab088 100644
--- a/lib/module/components/helpers/DelayedFreeze.js.map
+++ b/lib/module/components/helpers/DelayedFreeze.js.map
@@ -1 +1 @@
-{"version":3,"names":["React","Freeze","DelayedFreeze","freeze","children","freezeState","setFreezeState","useState","useEffect","id","setImmediate","clearImmediate","createElement"],"sourceRoot":"../../../../src","sources":["components/helpers/DelayedFreeze.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,MAAM,QAAQ,cAAc;AAOrC;AACA;AACA,SAASC,aAAaA,CAAC;EAAEC,MAAM;EAAEC;AAA6B,CAAC,EAAE;EAC/D;EACA,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGN,KAAK,CAACO,QAAQ,CAAC,KAAK,CAAC;EAE3DP,KAAK,CAACQ,SAAS,CAAC,MAAM;IACpB,MAAMC,EAAE,GAAGC,YAAY,CAAC,MAAM;MAC5BJ,cAAc,CAACH,MAAM,CAAC;IACxB,CAAC,CAAC;IACF,OAAO,MAAM;MACXQ,cAAc,CAACF,EAAE,CAAC;IACpB,CAAC;EACH,CAAC,EAAE,CAACN,MAAM,CAAC,CAAC;EAEZ,oBAAOH,KAAA,CAAAY,aAAA,CAACX,MAAM;IAACE,MAAM,EAAEA,MAAM,GAAGE,WAAW,GAAG;EAAM,GAAED,QAAiB,CAAC;AAC1E;AAEA,eAAeF,aAAa","ignoreList":[]}
+{"version":3,"names":["React","Freeze","DelayedFreeze","freeze","children","freezeState","setFreezeState","useState","useEffect","id","setTimeout","clearTimeout","createElement"],"sourceRoot":"../../../../src","sources":["components/helpers/DelayedFreeze.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,MAAM,QAAQ,cAAc;AAOrC;AACA;AACA,SAASC,aAAaA,CAAC;EAAEC,MAAM;EAAEC;AAA6B,CAAC,EAAE;EAC/D;EACA,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGN,KAAK,CAACO,QAAQ,CAAC,KAAK,CAAC;EAE3DP,KAAK,CAACQ,SAAS,CAAC,MAAM;IACpB,MAAMC,EAAE,GAAGC,YAAY,CAAC,MAAM;MAC5BJ,cAAc,CAACH,MAAM,CAAC;IACxB,CAAC,CAAC;IACF,OAAO,MAAM;MACXQ,cAAc,CAACF,EAAE,CAAC;IACpB,CAAC;EACH,CAAC,EAAE,CAACN,MAAM,CAAC,CAAC;EAEZ,oBAAOH,KAAA,CAAAY,aAAA,CAACX,MAAM;IAACE,MAAM,EAAEA,MAAM,GAAGE,WAAW,GAAG;EAAM,GAAED,QAAiB,CAAC;AAC1E;AAEA,eAAeF,aAAa","ignoreList":[]}
diff --git a/src/components/helpers/DelayedFreeze.tsx b/src/components/helpers/DelayedFreeze.tsx
index eda260da1946850cfd7b2289a03bdde6993e1b3f..443da6370b007596bcc56016f57283f36b01b3fa 100644
--- a/src/components/helpers/DelayedFreeze.tsx
+++ b/src/components/helpers/DelayedFreeze.tsx
@@ -13,11 +13,11 @@ function DelayedFreeze({ freeze, children }: FreezeWrapperProps) {
   const [freezeState, setFreezeState] = React.useState(false);
 
   React.useEffect(() => {
-    const id = setImmediate(() => {
+    const id = setTimeout(() => {
       setFreezeState(freeze);
-    });
+    }, 0);
     return () => {
-      clearImmediate(id);
+      clearTimeout(id);
     };
   }, [freeze]);
 

[kligarski]

Hi, @G2Jose. Replying here to #2963 (comment) as well.

The changes from #2963 are available in nightly releases on npm. Can you try using one of them and test if this fixes the issue for you?

If the issue still persists, we would appreciate if you could provide a minimal reproduction with the bug so we can have a look at it in more detail (the issue from #2971 (comment) seems to be fixed now).

[G2Jose]

@kligarski it doesn't appear like this fixes the issue in my case. I haven't yet been able to get a minimal reproduction here, but this video shows what I observe on my app.

With freezeOnBlur: false - I'm able to trigger many state updates in quick succession without any issues
With freezeOnBlur: true - it appears that when a state update is already in progress, and if I trigger another one, it leads to a runaway memory leak.

(behind the scenes here marking a set as complete kicks of a rather complex redux update after writing to a sqlite database, i.e we're not simply updating a boolean component state)