Apakah yang dilakukan React.memo dan bilakah patut menggunakannya?

Question

Accepted Answer

`React.memo` membungkus komponen sehingga **melangkau render ulang apabila props-nya adalah cetek-sama dengan render sebelumnya**. Secara lalai, anak akan render ulang setiap kali induk melakukan render; `memo` memendekkan itu apabila props tidak benar-benar 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}

; }); ``` ## Tangkapannya: memerlukan props yang stabil `memo` melakukan perbandingan **cetek**. Jika induk melewatkan object/array/function baru setiap kali render, 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 menggunakan `useCallback`: ```jsx const onSelect = useCallback(id => pick(id), []); // same reference across renders return items.map(i => ); ``` ## Bilakah patut - Komponen render **sering** dengan props **yang sama** dan rendernya tidak sepele (senarai besar, subtree mahal). ## Bilakah tidak patut - Kebanyakan komponen murah; perbandingan sendiri mempunyai kos, dan membungkus segala-galanya menambah kerumitan tanpa faedah. **Profil dulu** dengan React DevTools Profiler, kemudian memoize hotspot yang terbukti — jangan memoize secara membuta.