Join the discussion
Comments
Loading comments...
Cookie preferences
We use essential cookies for sign-in and preferences. With your permission, we also use basic analytics to improve lessons.
Join the discussion
Loading comments...
We use essential cookies for sign-in and preferences. With your permission, we also use basic analytics to improve lessons.
React computed values aur function references ko cache karke expensive recalculations kaise skip karta hai.
Memoization ek caching technique hai jahan React ek expensive computation ka result store karta hai aur subsequent renders par cached result return karta hai â jab inputs nahi bade toh computation poori tarah skip karta hai. useMemo computed values cache karta hai. useCallback function references cache karta hai. Dono recompute kab karna hai decide karne ke liye ek dependency array use karte hain.
useMemo(() => expensiveComputation(a, b), [a, b]) pehle render par function call karta hai aur result store karta hai. Re-renders par, React check karta hai ki a ya b change hua ki nahi. Agar nahi, toh function dobara call kiye bina cached result return karta hai.
useCallback(fn, [deps]) useMemo(() => fn, [deps]) ke equivalent hai. Return value cache karne ki jagah, woh function object cache karta hai. Yeh isliye important hai kyunki JavaScript har render par ek naya function object banata hai â jo child component props ke liye referential equality tod deta hai.
React har dep value ko Object.is() (strict equality) use karke compare karta hai. Primitive values (numbers, strings, booleans) value se compare hote hain. Objects aur arrays reference se compare hote hain â toh deps mein ek naya object literal '{''}' hamesha recomputation trigger karta hai.
Agar saare deps previous render ke deps ke equal hain, React factory function call kiye bina immediately memoized value return karta hai. Component phir bhi re-render karta hai â lekin expensive computation skip ho jaati hai.
Agar koi bhi dep change hua, React factory function dobara call karta hai, naya result store karta hai, aur return karta hai. Purana cached value discard ho jaata hai.
Ek computation ki return value cache karta hai. Sirf deps change hone par recompute karta hai. Props/state se derived expensive calculations ke liye useful.
Ek function reference cache karta hai. useMemo(() => fn, deps) ke equivalent. Memoized child components ko callbacks pass karte waqt critical.
Do objects/arrays equal hote hain sirf tab jab woh same memory address point karte hain. '{''}' === '{''}' false hai. useMemo/useCallback renders ke across identity preserve karte hain.
useMemo/useCallback ka doosra argument. React yeh values renders ke beech compare karta hai decide karne ke liye ki recompute karna hai ki nahi.
Higher-order component jo ek component ke render output ko memoize karta hai. Callback props stabilize karne ke liye useCallback ke saath combine karne par best kaam karta hai.
1function ParentComponent({ items }) {2 const [filter, setFilter] = useState('');3 const [count, setCount] = useState(0);45 // useMemo: expensive filter only recomputes when items/filter change6 const filteredItems = useMemo(7 () => items.filter(item => item.name.includes(filter)),8 [items, filter]9 );1011 // useCallback: stable reference, doesn't cause Child re-render12 // when only 'count' changes13 const handleSelect = useCallback((id) => {14 console.log('Selected:', id);15 }, []); // no deps â function never needs to change1617 return (18 <>19 <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>20 <MemoizedChild items={filteredItems} onSelect={handleSelect} />21 </>22 );23}2425const MemoizedChild = React.memo(({ items, onSelect }) => {26 // Only re-renders when items or onSelect reference changes27 return items.map(i => <Item key={i.id} item={i} onSelect={onSelect} />);28});
Memoization ke bina, har parent re-render naye object/function references banata hai, React.memo'd children ko unnecessarily re-render karata hai. useMemo aur useCallback referential stability preserve karte hain, React.memo ko effective banate hain aur large component trees mein cascading re-renders rokate hain.
Your analytics dashboard processes 10,000 rows of sales data to calculate aggregates (sum, average, percentiles) and format display values. A clock that updates every second causes the entire dashboard to re-render â and the 50ms data processing runs every second.
The data transformation runs inside the render function without memoization. Every re-render (even from the clock ticker) recomputes all 10,000 rows. The dashboard becomes sluggish because 50ms of computation blocks the main thread on every tick.
Wrap the data transformation in `useMemo(() => processData(salesData), [salesData])`. Now the heavy computation only re-runs when `salesData` actually changes. Clock ticks cause re-renders but skip the 50ms computation entirely â React reuses the cached result.
Takeaway: useMemo is designed for expensive computations, not every value. The general guideline: if a computation takes more than 1ms or processes more than 100 items, it's a candidate for useMemo. Profile before optimizing â don't guess.
You wrap a heavy `DataTable` component in React.memo, but React DevTools still shows it re-renders every time the parent's unrelated state changes. Memo appears to 'not work.'
The parent passes `onRowClick={(id) => handleClick(id)}` â an inline arrow function. Every parent render creates a NEW function reference. React.memo compares props by reference: `oldFn !== newFn`, so it always re-renders. Memo is working correctly â the props ARE different every time.
Wrap the handler in `useCallback`: `const onRowClick = useCallback((id) => handleClick(id), [handleClick])`. Now the function reference is stable across renders. React.memo's shallow comparison sees identical props and correctly skips re-rendering the DataTable.
Takeaway: React.memo and useCallback/useMemo are a PAIR â they must be used together. React.memo is useless if any prop is an unstable reference (inline function, inline object, inline array). Always stabilize props with useCallback/useMemo before wrapping a child in React.memo.