Haruskah saya membungkus semua komponen saya dengan React.memo () jika tidak mengharapkan props?

Aug 18 2020

Meskipun sudah jelas mengapa Reacttidak menjalankan React.memo ke semua komponen fungsionalnya secara default, dan kita harus membungkus sendiri komponen fungsional kita jika diperlukan.

Dalam kasus saya, saya memiliki proyek reaksi besar dengan struktur seperti ini:

const MyBigApp = () => {
  const shouldShowX = useSelector(getShouldShowX);
  const shouldShowY = useSelector(getShouldShowY);
  // Many more selectors

  return (
    <>
      {shouldShowX && <ComplexComponentX />}
      {shouldShowY && <ComplexComponentY />}
      {/* many more components based on different selectors like above */}
   </>
  );
};

Semua logika bisnis saya ada di dalam redux dan komponen digunakan secara useSelectorinternal untuk mendapatkan data dari penyimpanan.

Apakah masuk akal untuk menggabungkan semua komponen anak saya React.memo, karena perubahan pada pemilih apa pun di tingkat akar menyebabkan seluruh aplikasi saya dirender ulang?

Sebelumnya dengan connectkami secara otomatis mendapatkan komponen memo yang membandingkan props kustom dan nilai toko yang diteruskan sebagai props ke komponen, jadi haruskah kita sekarang secara manual selalu melakukannya React.memosaat menggunakan useSelectordalam komponen yang tidak menerima props?

Jawaban

1 BryanDowning Aug 18 2020 at 06:08

Saya berpendapat bahwa Anda harus mempertimbangkan penggunaan React.memountuk komponen anak yang tidak menerima alat peraga apa pun. Saya sangat merekomendasikan artikel ini:https://dmitripavlutin.com/use-react-memo-wisely/

2.1 Komponen sering
dirender dengan props yang sama Kasus terbaik untuk membungkus komponen di React.memo () adalah saat Anda mengharapkan komponen fungsional sering dirender dan biasanya dengan props yang sama.

Karena komponen yang Anda tanyakan tidak menerima props apa pun, itu berarti props tidak akan pernah berubah. Oleh karena itu, masuk akal bahwa penggunaan React.memo dapat menghindari siklus render. Perhatikan peringatan penting ini dari artikel yang sama:

5. React.memo () adalah petunjuk kinerja.
Secara ketat, React menggunakan memoization sebagai petunjuk kinerja.

Meskipun dalam banyak situasi, React menghindari rendering komponen memo, Anda tidak boleh mengandalkannya untuk mencegah rendering.