Improve FlatList Performance Pada React Native Dengan Case Infinite Scroll

Pendahuluan

Bisanya dalam membuat list saya menggunakan FlatList. dalam menggunakan FlatList saya tidak mengalami banyak kendala ketika di staging mungkin karena list yang saya render jumlahnya sedikit karena menggunakan data dummy di staging. masalah mulai muncul ketika aplikasi running di production dengan jumlah item list yang dirender sangat banyak. didalam case saya me-render 30 item sekali render dan saya menerapkan infinite scroll. masalahnya mulai muncul ketika scrollnya sudah sampai 3 sampai 4 page atau setara dengan 4 * 30 item.

Solusi

setelah saya googling saya menemukan alternatif dari FlatList yaitu flash-list dan recyclerlistview. setelah saya baca documentasi dari kedua library itu akhirnya saya memutuskan menggunakan flash-list karena documentasinya lebih mudah di pahami dan flash-list juga menggunakan(depend) library recyclerlistview didalamnya.

Code

contohimplementasi FlashList di dalam code

<FlashList
   estimatedItemSize={100}
   data={this.state.list}
   renderItem={({ item, index }) => <Content item={item} index={index} />}
   onEndReachedThreshold={0.8}
   onEndReached={() => {
       this._populateNextBatch()
   }}
/>

code untuk fetch data dari backend

async _populateNextBatch(){
   // fetch api
   const json = await response.json();
   let shallowCopy = [...this.state.list];
   await json.data.forEach((content) => {
        if (!this.listIds.has(content.id)) {
          // add only non-duplicate
          this.listIds.add(content.id);
          shallowCopy.push(content);
        }
   })
   this.setState({list: shallowCopy })
}

Sekian contoh implementasi flash-list dengan tujuan untuk Improve List View Performance dengan case Infinite Scroll.
Jika kamu memiliki cara yang lain silahkan di share di dalam Kolom Komentar.👍