ちゃんとしないと VirtualizedList の仮想化を生かせない

React Native の話です。

RN で作る画面のレイアウト、NavigationBar と TabBar を除くと、VirtualizedList があるのみ or スクロール無し の2パターンしかない

— moriyuu (@moriyuu__) September 14, 2020

と思った。

みたいなレイアウトの（下にスクロールした先にコンテンツが並んでいる）ユーザー詳細画面があったら、

A

const UserPage = () => {
  return (
    <ScrollView>
      <ProfileComponent />
      <FlatList
        data={tweets}
        renderItem={renderItem}
      />
    </ScrollView>
  )
}

ではなく、

B

const UserPage = () => {
  return (
    <FlatList
      ListHeaderComponent={<ProfileComponent />}
      data={tweets}
      renderItem={renderItem}
    />
  )
}

と作る。

A で作ってしまいそうだけど、これでは FlatList はうまく仮想化されず、レンダリングのパフォーマンスが最適化されない。

A, B それぞれの renderItem の中で console.log するなどして、画面よりだいぶ下のほうの item が、画面をスクロールする前の段階でレンダリングされてしまうかどうかを確かめられる。A だとレンダリングされてしまうが、B だとその item の近くまでスクロールしないとレンダリングされない。

あと onEndReached とかも使えないしね

参考