Not freezing

[gunnartorfis]

I wanted to try out react-freeze so I decided to set up a test to see the before & after.
We have a React Native application with the following navigation structure:

• Tab bar
  • Stack A
    • Home screen
    • Bunch of screens
  • Stack B
    • Bunch of screens

In our "Home" screen, I wrote this (maybe overly complex) log-counter-loop, to see if it'd run before and after react-freeze. Unfortunately it's running both with and without the library.

// Home screen
React.useEffect(() => {
  const doSomething = async () => {
    for (let i = 0; i < 100; i++) {
      const myPromise = async () => {
        return new Promise(resolve => {
          setTimeout(() => {
            console.log('Ran: ', i);
            resolve(undefined);
          }, 1000);
        });
      };
      await myPromise();
    }
  };
  doSomething();
}, []);

Top of my index.js:

import { enableFreeze } from 'react-native-screens';
enableFreeze(true);

To make sure index.js is the first thing that's ran by the iOS part:

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
  #if DEBUG
    return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
  #else
    return [CodePush bundleURL];
  #endif
}

Here's a screen record for showcasing:

Untitled.mov

[kacperkapusciak]

Hi @gunnartorfis,
to my understanding, your code isn't going to work as a test for react-freeze. But why?

react-freeze stops React rerenders. It won't stop a function that is still running.

On the component mount, your log-counter-loop runs a function that schedules 100 promises to the Callback Queue with a timeout of 1 s. Each second event loop takes and runs one scheduled promise. It is running with and without freezing because it's not connected to the fact of whether a component is frozen or not. It's simply handled by a separate mechanism. If there would be some state change or something that causes rerender then freeze would handle that.

source: Understanding Event Loop, Call Stack, Event & Job Queue in Javascript

To test freezing we use this example in react-native-screens.

Cheers

[gunnartorfis]

Wow! Thank you so much for taking the time to give me such a thorough reply. I should have figured that out myself. Thanks again.