UI freezes and JavaScript FPS drops below 10 during API call on React Native Android – How can I prevent this?

I’m facing an issue where the UI freezes and the js FPS drops significantly during API calls in my React Native app (using MobX for state management). Despite setting isLoading in MobX, the UI doesn’t update because of the freeze. Interestingly, the app works smoothly on iOS with no such UI blocking.

What I’ve tried so far:

  1. useCallback and useMemo: Optimized functions and memoized values to prevent unnecessary re-renders.
  2. Lazy loading: Attempted to load components and data only when necessary to minimize initial load time.
  3. FlatList optimization: Used keyExtractor, getItemLayout, and initialNumToRender to improve FlatList performance.
  4. runInAction in MobX: Ensured state changes are wrapped in runInAction to batch updates and reduce observable changes.
  5. Disabled Hermes: Disabled Hermes engine, but no significant improvement.
    Enabled IPv6 in server: Tweaked server settings, ensuring faster connection times for mobile clients.
  6. Tested in release mode with console.log removed using babel-plugin-transform-remove-console.
  7. Used Pure Components

Despite these, the UI still freezes during the API calls. Below is the code that performs the API calls within useEffect, and MobX enables isLoading. However, the UI doesn’t reflect this update due to the freeze:

    async initializeHomeScreen() {
    console.log('Initializing Home Screen');
    console.time('Home Screen Initialization');

    // API call to load nearest restaurants
    await this.root.restaurantStore.loadAndRefreshNearestRestaurants(true);
    
    // Looping through Experience types to load data length - 5
    for (const exp of Object.values(ExperienceType)) {
      await this.root.restaurantStore.loadAndRefreshExpRestaurants(exp, true);
    }
    
    // API calls to load favorite and popular restaurants
    await this.root.restaurantStore.loadAndRefreshFavoriteRestaurants(true);
    await this.root.restaurantStore.loadAndRefreshPopularRestaurants(true);
    
    console.timeEnd('Home Screen Initialization END');

}