【React Native】ScrollViewとFlatlistの違い

はじめに

現在UdemyでReact Nativeを勉強しています。
小さいことですが、なるほどと感じたことをこちらでアウトプットしようと思います。
ちなみに受講しているコースはこちら↓です。

React Native - The Practical Guide [2021 Edition]
https://www.udemy.com/course/react-native-the-practical-guide/

日本語字幕が無いのがちょっと残念ですが、分かりやすくゆっくり話してくれるのでだいぶ助かります。

ScrollViewの書き方

<ScrollView>
     {goals.map(goal => (
       <VIew key={goal}>
         <Text>{goal}</Text>
       </View>
     ))}
</ScrollView>

シンプルにmap関数で表示させているものをScrollViewタグで挟んであげる。

Flatlistの書き方

<FlatList
        keyExtractor={(item, index) => item.id}
        data={goals}
        renderItem={itemData => (
          <View>
            <Text>{itemData.item.value}</Text>
          </View>
        )}
      />

ScrollViewと書き方は全然違う。

ScrollViewとFlatlistの違い

コース内ではパフォーマンスの観点でFlatlistをオススメされました。
ScrollViewは全てのデータをレンダリングしてしまうため、データの数が100,1000となるとパフォーマンスが下がってしまうようです。
一方Flatlistは画面に表示されるデータのみレンダリングするので、データ数が多くてもScrollViewと比べてパフォーマンスに影響しないようです。

終わりに

今回はScrollViewとFlatlistの違いについて書きましたが、正直まだ自身を持って説明できません。
今後新たな学びがありましたら更新します。
もしご指摘等ありましたら、ご教示いただけると幸いです。