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