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 और function references को cache करता है।
Memoization एक caching technique है जहाँ React एक expensive computation का result store करता है और subsequent renders पर cached result return करता है — जब inputs नहीं बदले तो computation पूरी तरह skip करता है। useMemo computed values cache करता है। useCallback function references cache करता है। दोनों recompute करना है या नहीं यह decide करने के लिए dependency array उपयोग करते हैं।
useMemo(() => expensiveComputation(a, b), [a, b]) पहले render पर function call करता है और result store करता है। Re-renders पर, React check करता है कि a या b बदला या नहीं। यदि नहीं, function को फिर call किए बिना cached result return करता है।
useCallback(fn, [deps]) useMemo(() => fn, [deps]) के equivalent है। Return value cache करने के बजाय, यह function object cache करता है। यह important है क्योंकि JavaScript हर render पर एक नया function object बनाता है — जो child component props के लिए referential equality break करता है।
React Object.is() (strict equality) का उपयोग करके प्रत्येक dep value compare करता है। Primitive values (numbers, strings, booleans) value से compare होती हैं। Objects और arrays reference से compare होते हैं — इसलिए deps में एक नया object literal '{''}' हमेशा recomputation trigger करता है।
यदि सभी deps पिछले render के deps के equal हैं, React बिना factory function call किए immediately memoized value return करता है। Component still re-renders — लेकिन expensive computation skip होती है।
यदि कोई dep बदला, React factory function फिर से call करता है, नया result store करता है, और return करता है। Old cached value discard हो जाती है।
एक computation का return value cache करता है। केवल deps बदलने पर recompute करता है। Props/state से derived expensive calculations के लिए useful।
एक function reference cache करता है। useMemo(() => fn, deps) के equivalent। Memoized child components को callbacks pass करते समय critical।
दो objects/arrays तभी equal हैं जब वे same memory address को point करते हों। '{''}' === '{''}' false है। useMemo/useCallback renders के पार identity preserve करते हैं।
useMemo/useCallback का दूसरा argument। React इन values को renders के बीच compare करता है यह decide करने के लिए कि recompute करना है या नहीं।
Higher-order component जो component का render output memoize करता है। Callback props stabilize करने के लिए useCallback के साथ combine करने पर best काम करता है।
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 के बिना, हर parent re-render नए object/function references बनाता है, जिससे React.memo'd children unnecessarily re-render होते हैं। useMemo और useCallback referential stability preserve करते हैं, React.memo को effective बनाते हैं और large component trees में cascading re-renders prevent करते हैं।
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.