Keduanya melakukan caching sesuatu antar renders sehingga tidak dihitung ulang/dibuat ulang setiap kali:
- melakukan caching pada .
useMemouseCallback melakukan caching pada identitas fungsi (yaitu useMemo(() => fn, deps)).Mereka ada untuk menghindari (a) mengulang pekerjaan yang mahal dan (b) memecahkan kesetaraan referensial yang bergantung pada anak yang di-memoization.
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} />;
}
Tanpa useCallback, handleSelect adalah fungsi baru setiap render. React.memo(Grid) akan melihat prop yang "baru" dan tetap akan melakukan re-render, mengalahkan memoization. Hal yang sama untuk objek yang diteruskan ke child yang di-memoization atau digunakan dalam array dependensi useEffect.
const x = useMemo(() => a + b, [a, b]); // ❌ pointless — adding is cheaper than memoizing
useMemo/useCallback yang diprioritaskan di mana-mana menambah kebisingan dan bahkan bisa lebih lambat. (Compiler React 19 dapat secara otomatis melakukan memoization, mengurangi kebutuhan ini.)