Пользовательский интерфейс зависает, а FPS JavaScript падает ниже 10 во время вызова API на React Native Android. Как я ⇐ Android

[Anonymous]

Я столкнулся с проблемой, когда пользовательский интерфейс зависает, а js FPS значительно падает во время вызовов API в моем приложении React Native (с использованием MobX для управления состоянием). Несмотря на настройку isLoading в MobX, пользовательский интерфейс не обновляется из-за зависания. Интересно, что приложение работает на iOS без каких-либо блокировок пользовательского интерфейса.
Что я пробовал:

• useCallback и useMemo: оптимизированы функции и запомнены значения для предотвращения ненужного повторного рендеринга.
• Отложенная загрузка: предпринимались попытки загружать компоненты и данные только при необходимости, чтобы минимизировать время начальной загрузки.
• Оптимизация FlatList: используются keyExtractor, getItemLayout и InitialNumToRender для повышения производительности FlatList.
• runInAction в MobX: гарантированные изменения состояния обертываются в runInAction для пакетного обновления и уменьшения наблюдаемых изменения.
• Отключен Hermes: отключен механизм Hermes, но никаких существенных улучшений.
  Включен IPv6 на сервере: изменены настройки сервера, обеспечивающие более быстрое соединение для мобильных клиентов.
• Протестировано в режиме выпуска с консольным файлом console.log, удаленным с помощью Babel-plugin-transform-remove-console.
  Используются чистые компоненты< /li>

Несмотря на это, пользовательский интерфейс по-прежнему зависает во время вызовов API. Ниже приведен код, который выполняет вызовы API внутри useEffect, а MobX включает isLoading. Однако пользовательский интерфейс не отражает это обновление из-за зависания:
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');

}


Подробнее здесь: https://stackoverflow.com/questions/791 ... native-and