Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Teknik untuk meminimalkan rendering ulang di React Native


Teknik untuk meminimalkan rendering ulang di React Native


Untuk meminimalkan rendering ulang di React Native, ikuti teknik berikut:

1. Memoisasi:
- Gunakan `useMemo` untuk menyimpan perhitungan dalam cache di antara perenderan ulang, mencegah perenderan ulang yang tidak perlu ketika props atau status belum berubah[1].

2. Daftar Virtual:
- Memanfaatkan `FlatList`, `SectionList`, atau `VirtualList` untuk merender hanya item yang terlihat di layar secara efisien, mengoptimalkan penggunaan memori dan kinerja rendering[1].

3. Optimalkan Gambar:
- Gunakan perpustakaan seperti `react-native-fast-image` atau `expo-image` untuk mengoptimalkan pemuatan dan caching gambar, memastikan pengalaman pengguna yang lebih lancar[1].

4. Menghilangkan Operasi Mahal:
- Cegah panggilan berlebihan ke fungsi seperti pencarian dan permintaan jaringan dengan memperkenalkan periode penundaan atau "penundaan debounce" sebelum menjalankan fungsi[1].

5. Gunakan React.memo atau React.PureComponent:
- Pastikan komponen hanya dirender ulang ketika propsnya berubah dengan menggunakan `React.memo` atau `React.PureComponent`[3].

6. Hindari Perenderan Ulang yang Tidak Perlu:
- Gunakan `useMemo` untuk membatasi kapan objek diperbarui dan menghindari perenderan ulang yang tidak perlu yang disebabkan oleh literal objek atau penghitungan dinamis[3].

7. Gunakan Kunci untuk Menghindari Render Ulang:
- Gunakan kunci untuk menghindari rendering ulang ketika item dalam daftar berubah, memastikan rendering dan kinerja yang efisien [4].

8. Optimalkan Komposisi Komponen:
- Pastikan komponen disusun secara efisien dengan menghindari rendering ulang yang tidak perlu dan mengoptimalkan penggunaan hook seperti `useMemo` dan `useCallback`[4].

Teknik-teknik ini membantu meminimalkan perenderan ulang di React Native, memastikan pengalaman pengguna yang lebih lancar dan kinerja yang lebih baik.

Kutipan:
[1] https://thinkbot.com/blog/optimizing-kinerja-in-react-native-tips-and-techniques
[2] https://www.reddit.com/r/reactnative/comments/uaaxyu/tips_on_how_to_reduce_rerenders/
[3] https://www.debugbear.com/blog/react-rerenders
[4] https://dev.to/femi_akinyemi/how-to-prevent-unnecessary-react-component-re-rendering-3c08
[5] https://www.linkedin.com/pulse/avoid-unnecessary-re-renders-reactjs-christian-zanchetta