Apa sing ditindakake dening React.memo lan kapan iku layak digunakake?

Question

Accepted Answer

`React.memo` mbungkus sawijining komponen supaya **ngluskake re-rendering nalika propse-propse sama cethol (shallow-equal) karo rendering sadurunge**. Biasane anak bakal di-render maneh nalika induke nglakoni rendering; `memo` ngethok iku nalika propse-propse ora bener-bener ganti. ```jsx const Row = React.memo(function Row({ item, onSelect }) { // re-renders only when `item` or `onSelect` reference changes return

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

; }); ``` ## Jebakan: butuh propse-propse stabil `memo` nindakake pembandingan **cethol**. Yen induke ngirim obyek/array/fungsi anyar saben rendering, pembandingan mesthi gagal lan `memo` ora bakal nindakake apa-apa: ```jsx function List({ items }) { // ❌ a NEW function every render → Row's onSelect prop always "changes" return items.map(i => pick(id)} />); } ``` Perbaiki kanthi nyetabilake fungsi nganggo `useCallback`: ```jsx const onSelect = useCallback(id => pick(id), []); // same reference across renders return items.map(i => ); ``` ## Kapan iku layak - Sawijining komponen nge-render **kerep** karo propse **padha** lan render-e ana isine (dhaptar gedhe, subtree sing larang). ## Kapan ora - Akeh komponen murah; pembandingan dhewe ana biaye, lan mbungkus kabeh nambah rumit tanpa pamanggih. **Profile luwih dhisik** nganggo React DevTools Profiler, banjur memo-ake hotspot sing wis buruh — aja memo-ake buta.