React データを少しずつ表示したい！

Question

ReactとFirebaseのFirestoreに保存されているデータを表示したいのですが、パフォーマンスが悪いので改善したいのですが、方法が分からなかったため、質問させていただきます！

以下、React.jsのコードと表示結果の画面になります。

やりたいこととしては「一気にではなく、スクロールしてちょっとずつデータを表示していく」です。

//hogehoge.jsのデータを表示するファイル
import 'hogehoge' from '../../hogehoge';
import { useFirestoreConnect } from "react-redux-firebase";

===

// Firestoreに接続。データを読み込み。
   useFirestoreConnect([
    {
      hogehoge: "hogehoge"
    },
  ]);
　const data = useselector(
      (state) => state.firestore.ordered[`hogehogedata`]
 )
===

return (
    <div>
       <hogehoge
           data={data.data}
       />
    </div>
)

//hogehoge.js 

===
   return (
      <h2>
         {props.data}
      </h2>
   )

結果
ーーーーーーーーー
１
２
３
４
５
ーーーーーーーーー以下スクロールすると見える状態
６
７
８
９
１０

** 現状、上記の１から１０までが一気に表示されています。このままだとデータの数が増えると重くなってしまいます。よって最初に出ているのは５までにして、スクロールして初めて６以下が表示されるようにしたいです。**

何か方法をご存知の方がいらっしゃいましたら、教えていただきたいです。よろしくお願いします。