menggunakan React.memo dalam komponen fungsional untuk renderItem FlatList untuk meminimalkan render ulang item yang ada

Aug 20 2020

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

2 ShubhamVerma Aug 20 2020 at 15:18

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