React.memo inafanya nini na lini ni sawa kuitumia?

Question

Accepted Answer

`React.memo` huzunguka sehemu ili **irudishe upya kwa mipango inayofanana kwa shallow** na kuzaliwa hapo awali. Kwa ujumla, sehemu ndogo inazaliwa upya wakati wazazi wake inafanya; `memo` inastahimili hilo wakati mipango haisibadilishe kwa kweli: ```jsx const Row = React.memo(function Row({ item, onSelect }) { // re-renders only when `item` or `onSelect` reference changes return

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

; }); ``` ## Nyingine: inahitaji mipango imara `memo` inafanya mulinganisho wa **shallow**. Ikiwa wazazi anatuma kitu kipya/safu/kazi kila kuzaliwa, mulinganisho unashindwa kila wakati na `memo` haifanyi kitu: ```jsx function List({ items }) { // ❌ a NEW function every render → Row's onSelect prop always "changes" return items.map(i => pick(id)} />); } ``` Suluhisha kwa kustabilisha kazi na `useCallback`: ```jsx const onSelect = useCallback(id => pick(id), []); // same reference across renders return items.map(i => ); ``` ## Lini ni sawa - Sehemu inazaliwa **mara kwa mara** na **mipango hiyo hiyo** na kuzaliwa kwake sio rahisi (orodha kubwa, miti ghali). ## Lini si sawa - Sehemu nyingi ni rahisi; mulinganisho yenyewe ina gharama, na kuzunguka kila kitu huongeza mzigo bila faida. **Tafsiri kwanza** na React DevTools Profiler, kisha memoizee sehemu zilizothibitika — usimemoize kwa upofu.