Haruskah saya membungkus semua komponen saya dengan React.memo () jika tidak mengharapkan props?
Meskipun sudah jelas mengapa React
tidak 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 useSelector
internal 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 connect
kami 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.memo
saat menggunakan useSelector
dalam komponen yang tidak menerima props?
Jawaban
Saya berpendapat bahwa Anda harus mempertimbangkan penggunaan React.memo
untuk 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.