উভয়ই কিছু কিছু renders জুড়ে ক্যাশ করে যাতে এটি প্রতিবার পুনর্গণনা/পুনরায় তৈরি না হয়:
useMemoএকটি ক্যাশ করে।
উভয়ই কিছু কিছু renders জুড়ে ক্যাশ করে যাতে এটি প্রতিবার পুনর্গণনা/পুনরায় তৈরি না হয়:
useMemo একটি ক্যাশ করে।useCallback একটি ফাংশনের পরিচয় ক্যাশ করে (এটি useMemo(() => fn, deps))।তারা বিদ্যমান আছে (ক) ব্যয়বহুল কাজ পুনরাবৃত্তি এড়াতে এবং (খ) রেফারেনশিয়াল সমতা ভাঙতে এড়াতে যা memoized শিশুরা নির্ভর করে।
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} />;
}
useCallback ছাড়াই, handleSelect প্রতিটি render এ একটি সম্পূর্ণ নতুন ফাংশন। একটি React.memo(Grid) একটি "নতুন" prop দেখবে এবং যাইহোক পুনরায় render করবে, memoization পরাজিত করবে। একটি memoized শিশুতে প্রেরিত একটি অবজেক্টের জন্য বা useEffect dependency array এ ব্যবহৃত একটির জন্য একই।
const x = useMemo(() => a + b, [a, b]); // ❌ pointless — adding is cheaper than memoizing
useMemo/useCallback শব্দ যোগ করে এবং এমনকি ধীর হতে পারে। (React 19 এর compiler স্বয়ংক্রিয়ভাবে memoize করতে পারে, প্রয়োজন হ্রাস করে।)