menggunakan React.memo dalam komponen fungsional untuk renderItem FlatList untuk meminimalkan render ulang item yang ada
Saya menggunakan komponen fungsional, dan menggunakan Flatlist untuk membuat daftar data, ini berfungsi dengan baik, tetapi setiap kali status mendapatkan data tambahan, selalu ada rendering ulang dan itu akan menyebabkan masalah kinerja, saya telah membaca artikel ini dari SO tetapi masih memiliki tidak ada petunjuk
- https://stackoverflow.com/a/57405307/938947
- https://stackoverflow.com/a/46349156/938947
berikut adalah kode saya yang menggunakan Flatlist utama
<FlatList
horizontal={false}
showsHorizontalScrollIndicator={false}
data={users}
keyExtractor={(item, index) => String(index)}
renderItem={RenderUser}
onEndReachedThreshold={0.7}
onEndReached={callBackMoreData}
/>
dan di sini berfungsi RenderUser tetapi masalah itu merender ulang item yang ada jika negara memiliki data tambahan, yang ingin saya capai hanya membuat data tambahan
import React from 'react';
import { ListItem } from 'react-native-elements';
const RenderUser = ({ item, index }) => {
return (
<React.Fragment>
{ console.log('index: ', index)}
<ListItem
title={item.attributes.name}
/>
</React.Fragment>
);
};
export default RenderUser;
dan saya mencoba menggunakan kode ini di bawah (tetapi saya mendapatkan pesan kesalahan yang mengatakan TypeError: renderItem bukan sebuah fungsi. (di 'renderItem (props)', 'renderItem' adalah turunan dari objek))
import React, { memo } from 'react';
import { ListItem } from 'react-native-elements';
const RenderUser = ({ item, index }) => {
return (
<React.Fragment>
{ console.log('index: ', index)}
<ListItem
title={item.attributes.name}
/>
</React.Fragment>
);
};
export default memo(RenderUser);
Jawaban
Menurut dokumentasi resmi react:
Secara default, ini hanya akan membandingkan objek kompleks dalam objek props secara dangkal. Jika Anda ingin mengontrol perbandingan, Anda juga dapat menyediakan fungsi perbandingan kustom sebagai argumen kedua
function MyComponent(props) {
/* render using props */
}
function areEqual(prevProps, nextProps) {
/*
return true if passing nextProps to render would return
the same result as passing prevProps to render,
otherwise return false
*/
}
export default React.memo(MyComponent, areEqual);
Dalam kasus Anda, Anda perlu menambahkan condtion:
import React, { memo } from 'react';
import { ListItem } from 'react-native-elements';
const RenderUser = ({ item, index }) => {
return (
<React.Fragment>
{ console.log('index: ', index)}
<ListItem
title={item.attributes.name}
/>
</React.Fragment>
);
};
function arePropsEqual(prevProps, nextProps) {
/*
return true if passing nextProps to render would return
the same result as passing prevProps to render,
otherwise return false
*/
return nextProps.item.attribute.name===prevProps.item.attribute.name
}
export default memo(RenderUser,arePropsEqual);
Catatan : Tidak yakin berapa banyak props yang Anda dapatkan dan apa yang unik. Pada dasarnya Anda perlu membandingkan bahwa yang terakhir sama dengan yang satu ini kembali benar dengan cara itu react tidak merender ulang komponen Anda