Apa yang dilakukan React.memo dan kapan pantas digunakan?

Question

Accepted Answer

`React.memo` membungkus komponen agar **melewati rendering ulang ketika prop-nya secara dangkal sama dengan rendering sebelumnya**. Secara bawaan anak melakukan rendering ulang setiap kali induknya melakukan; `memo` memutus-hubung-singkat itu ketika prop-nya sebenarnya tidak berubah. ```jsx const Row = React.memo(function Row({ item, onSelect }) { // re-renders only when `item` or `onSelect` reference changes return

onSelect(item.id)}>{item.name}

; }); ``` ## Masalahnya: memerlukan prop stabil `memo` melakukan perbandingan **dangkal**. Jika induk melewatkan objek/array/fungsi baru setiap rendering, perbandingan selalu gagal dan `memo` tidak melakukan apa-apa: ```jsx function List({ items }) { // ❌ a NEW function every render → Row's onSelect prop always "changes" return items.map(i => pick(id)} />); } ``` Perbaiki dengan menstabilkan fungsi dengan `useCallback`: ```jsx const onSelect = useCallback(id => pick(id), []); // same reference across renders return items.map(i => ); ``` ## Mengapa ini penting - Komponen melakukan rendering **sering** dengan prop **yang sama** dan rendering-nya tidak trivial (daftar besar, subtree mahal). ## Ketika tidak - Sebagian besar komponen murah; perbandingan sendiri memiliki biaya, dan membungkus segalanya menambah kerumitan tanpa keuntungan. **Lakukan profil terlebih dahulu** dengan React DevTools Profiler, kemudian memokan hotspot yang terbukti — jangan memokan secara membabi buta.