React Native パフォーマンス最適化の実践テクニック

はじめに

React Native アプリの開発が進むにつれ、パフォーマンスの問題に直面することは珍しくありません。本記事では、実際のプロジェクトで効果があったパフォーマンス最適化のテクニックを紹介します。

FlatList の最適化

大量のデータを表示するリストは、パフォーマンスのボトルネックになりやすいです。

getItemLayout を活用する

アイテムの高さが固定の場合、getItemLayout を指定することでレイアウト計算をスキップできます。

<FlatList
  data={items}
  renderItem={renderItem}
  getItemLayout={(_, index) => ({
    length: ITEM_HEIGHT,
    offset: ITEM_HEIGHT * index,
    index,
  })}
/>

windowSize を調整する

デフォルトの windowSize は 21 ですが、メモリ使用量を抑えたい場合は小さくします。

<FlatList
  data={items}
  renderItem={renderItem}
  windowSize={5}
  maxToRenderPerBatch={10}
  removeClippedSubviews={true}
/>

メモ化戦略

React.memo の適切な使用

再レンダリングが頻繁なコンポーネントには React.memo を使います。ただし、すべてのコンポーネントに適用する必要はありません。

const ListItem = React.memo(({ title, onPress }: Props) => (
  <Pressable onPress={onPress}>
    <Text>{title}</Text>
  </Pressable>
));

useCallback でコールバックを安定させる

React.memo と組み合わせて、コールバック関数もメモ化します。

const handlePress = useCallback(
  (id: string) => {
    navigation.navigate("Detail", { id });
  },
  [navigation],
);

アニメーションの最適化

ネイティブドライバを使う

useNativeDriver: true を指定することで、アニメーションを JS スレッドからネイティブスレッドに移せます。

Animated.timing(fadeAnim, {
  toValue: 1,
  duration: 300,
  useNativeDriver: true,
}).start();

Reanimated を活用する

より複雑なアニメーションには react-native-reanimated を使うことで、60fps を維持しやすくなります。

まとめ

パフォーマンス最適化は計測から始まります。React DevTools の Profiler や Flipper を使って、まずボトルネックを特定してから対策を打ちましょう。