Zote zinacheza kitu kote hizo rendering ili haisiwi kuandikwa/kutengenezwa mara kwa mara:
useMemoinacheza .
useCallback inacheza kitambulisho cha kazi (ni useMemo(() => fn, deps)).Zipo ili kuepuka (a) kurudia kazi ghali na (b) kuvunja usawa wa rejea ambao watoto wanaokamatia hutegemea.
function Table({ rows, onSelect }) {
// (a) expensive computation — recompute only when `rows` changes
const sorted = useMemo(() => rows.slice().sort(byName), [rows]);
// (b) stable function identity — so a React.memo child doesn't re-render,
// and effects depending on it don't re-fire
const handleSelect = useCallback(id => onSelect(id), [onSelect]);
return <Grid rows={sorted} onSelect={handleSelect} />;
}
Bila useCallback, handleSelect ni kazi mpya kabisa kila wakati wa rendering. React.memo(Grid) ingeuona rekebisha "mpya" na bado ingefanya upya, inayoshindikana memoization. Sawa kwa kitu kilichopitishwa kwa mtoto anayekamatia au kutumika katika safu ya useEffect dependency.
const x = useMemo(() => a + b, [a, b]); // ❌ pointless — adding is cheaper than memoizing
useMemo/useCallback kote inayoongeza kelele na inaweza kuwa polepole hata. (React 19 compiler inaweza kukamatia kiotomatiki, inayopunguza haja.)