24. Производительность

React Native по умолчанию быстрый, но для больших приложений нужны оптимизации.

Hermes Engine

JavaScript движок Meta для мобильных. AOT компиляция в байткод:

{ "expo": { "jsEngine": "hermes" } }

• Время запуска -40-60%
• Меньше потребление памяти
• Включён по умолчанию в новых проектах

FlashList — замена FlatList

npx expo install @shopify/flash-list

import { FlashList } from "@shopify/flash-list";

// В 10x быстрее FlatList
<FlashList
  data={data}
  renderItem={({ item }) => <Item item={item} />}
  estimatedItemSize={80}  // Примерная высота — важно!
  keyExtractor={(item) => item.id}
/>

React.memo и useCallback

// Без memo: перерендер при КАЖДОМ изменении родителя
const Item = ({ data, onPress }) => <View>...</View>;

// С memo: только при изменении props
const Item = React.memo(({ data, onPress }) => <View>...</View>);

// useCallback — стабильная ссылка на функцию
const handlePress = useCallback((id) => {
  navigation.navigate('Details', { id });
}, [navigation]);

// useMemo — мемоизация вычислений
const sortedData = useMemo(
  () => data.sort((a, b) => a.title.localeCompare(b.title)),
  [data]
);

InteractionManager

import { InteractionManager } from 'react-native';

// Выполнить ПОСЛЕ анимации перехода
InteractionManager.runAfterInteractions(() => {
  fetchData();           // Тяжёлая операция
  buildExpensiveList();  // Не мешает анимации
});

Image оптимизация

import { Image } from 'expo-image';

<Image
  source={imageUrl}
  contentFit="cover"
  cachePolicy="memory-disk"
  placeholder={{ blurhash: 'LKO2:N%2Tw=w]...' }}
  transition={200}
/>

Антипаттерны

// ❌ Анонимная функция в JSX (новый объект каждый рендер)
<FlatList renderItem={({ item }) => <Item item={item} />} />

// ✅ Вынести renderItem
const renderItem = useCallback(({ item }) => <Item item={item} />, []);
<FlatList renderItem={renderItem} />

// ❌ Inline style объект
<View style={{ backgroundColor: '#1e1e2e', padding: 16 }} />

// ✅ StyleSheet.create
<View style={styles.container} />

// ❌ setState в цикле
items.forEach(item => setState(s => [...s, item]));

// ✅ Batch update
setState(prev => [...prev, ...items]);

Профилирование

# React DevTools → Profiler → Record

# Console timing
console.time('render');
// ...
console.timeEnd('render');

# Perf Monitor (встроенный)
# Shake устройство → Performance Monitor