10 неочевидных советов по улучшению приложений на React Native

React Native - это идеальный инструмент для тех, кто хочет писать один раз и тиражировать приложение на множество платформ. Такой подход упрощает разработку, но скрывает множество подводных камней. Про некоторую часть подобных моментов мы расскажем в этой статье.

Начнем⚡

1️⃣ Используйте FlatList вместо рендеринга массивов в JSX

Отображение списков через .map() внутри ScrollView работает для небольших наборов данных и при небольшом количестве вызовов.

FlatList создан для больших данных:

Поддержка lazy-load
Переиспользование JSX шаблонов для повышения производительности
Идеально справляется со сложными макетами списков

Обязательно устанавливайте правильный keyExtractor для повышения производительности.

2️⃣ Оптимизируйте изображения

Большие картинки = медленная работа вашего приложения.

Используйте библиотеку react-native-fast-image для кеширования и быстрой загрузки изображений из url
Сжимайте изображения перед использованием в приложении
Используйте srcSet для указания масштаба изображения 1x и 2x

3️⃣ Чаще используйте useCallback и useMemo

Эти два хука предотвращают повторный рендер компонентов и зачастую кратно увеличивают производительность.

                                JS                            

const memoizedFn = useCallback(() => {
	console.log('Запустится только при изменении значения dependency');
}, [dependency]);

4️⃣ Не злоупотребляйте использованием useState

Для временных данных достаточно использовать let и const, что существенно уменьшает количество используемой памяти.

5️⃣ Выбирайте библиотеки для навигации с умом

React Navigation - широкий функционал, большая популярность, в частных случаях невысокая отзывчивость
React Native Navigation от Wix - использует большое количество нативного функционала, более простой подход в описании экранов и стэков

6️⃣ Используйте Safe Area Insets для безрамочных устройств

На некоторых типах устройств ваше приложение может быть обрезано. Чтобы этого избежать, используйте хук useSafeAreaInsets.

                                JS                            

import { useSafeAreaInsets } from 'react-native-safe-area-context';

const insets = useSafeAreaInsets();
console.log("Отступ сверху", insets.top);

7️⃣ Обрабатывайте исключения для fetch запросов

Если вы используете нативный fetch или обертку типа axios, всегда обрабатывайте исключения.

8️⃣ Избавляйтесь от console.log при публикации приложения

Старайтесь не допускать попадания console.log в продуктивную сборку. Их наличие позволит быстрее выявить уязвимости вашего кода.

9️⃣ Чаще тестируйте на реальных устройствах

Эмуляторы работают хорошо, но дают доступ не ко всем функциям устройств.

Вот некоторые исключения:

Доступ к GPS в реальном времени и определение местоположения через мобильного оператора
Доступ к камере устройства
Управление различными жестами

🔟 Старайтесь обновлять ядро React Native как можно чаще

Библиотека развивается очень быстро и разработчики иногда вносят серьезные изменения. Обновить ваше приложение спустя годы будет значительно сложнее, чем плановые обновления один раз в пару месяцев.

💡 Напоследок

React Native - это не просто создание кроссплатформенных приложений, это разработка качественных, максимально нативных приложений. Следуйте советам, и вы сможете избежать распространенных ошибок и создавать приложения, которые нравятся пользователям.