ਤੁਹਾਨੂੰ useMemo ਅਤੇ useCallback ਕਦੋਂ ਵਰਤਣੇ ਚਾਹੀਦੇ ਹਨ, ਅਤੇ ਉਹ ਕਿਹੜੀ ਸਮੱਸਿਆ ਦਾ ਹੱਲ ਕਰਦੇ ਹਨ?

Question

IT Interview Practice · Accepted Answer

ਦੋਵੇਂ render ਦੌਰਾਨ ਕੁਝ cache ਕਰਦੇ ਹਨ ਤਾਂ ਜੋ ਇਹ ਹਰ ਵਾਰ ਮੁੜ ਨਾ ਬਣਾਈਆ ਜਾਵੇ:
- **`useMemo`** ਇੱਕ **computed value** ਨੂੰ cache ਕਰਦਾ ਹੈ।
- **`useCallback`** ਇੱਕ **function ਦੀ identity** ਨੂੰ cache ਕਰਦਾ ਹੈ (ਇਹ `useMemo(() => fn, deps)` ਹੈ)।

ਉਹ (a) ਮਹਿੰਗੇ ਕੰਮ ਨੂੰ ਦੁਹਰਾਉਣ ਤੋਂ ਬਚਣ ਅਤੇ (b) referential equality ਨੂੰ ਟੁੱਟਣ ਤੋਂ ਬਚਣ ਲਈ ਮੌਜੂਦ ਹਨ ਜਿਸ ਉੱਤੇ memoized ਬੱਚੇ ਨਿਰਭਰ ਹਨ।

```jsx
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} />;
}
```

## Referential ਸਥਿਰਤਾ ਕਿਉਂ ਮਾਇਨੇ ਰੱਖਦੀ ਹੈ

`useCallback` ਦੇ ਬਿਨਾਂ, `handleSelect` ਹਰ render ਵਿੱਚ ਇੱਕ ਬਿਲਕੁਲ ਨਵਾਂ function ਹੈ। ਇੱਕ `React.memo(Grid)` ਇੱਕ "ਨਵਾਂ" prop ਦੇਖੇਗਾ ਅਤੇ ਫਿਰ ਵੀ render ਕਰੇਗਾ, memoization ਨੂੰ ਹਰਾ ਦੇਵੇਗਾ। ਇੱਕ memoized ਬੱਚੇ ਨੂੰ ਭੇਜੀ ਗਈ ਇੱਕ object ਜਾਂ `useEffect` dependency array ਵਿੱਚ ਵਰਤੀ ਗਈ object ਲਈ ਵੀ ਇਹੀ ਗੱਲ ਹੈ।

## ਟ੍ਰੇਡ-ਅਫ਼ — ਉਨ੍ਹਾਂ ਨੂੰ ਬਹੁਤ ਜ਼ਿਆਦਾ ਵਰਤ ਨਾ ਕਰੋ

```jsx
const x = useMemo(() => a + b, [a, b]); // ❌ pointless — adding is cheaper than memoizing
```

- Memoization ਮੁਫ਼ਤ ਨਹੀਂ ਹੈ: ਇਹ memory ਅਤੇ **ਹਰ** render ਉੱਤੇ ਇੱਕ dependency comparison ਦੀ ਕੀਮਤ ਹੈ।
- ਇੱਕ ਗਲਤ/ਲਾਪਤਾ dependency array ਤੁਹਾਨੂੰ **stale values** ਦਿੰਦਾ ਹੈ — ਸਭ ਤੋਂ ਆਮ bug।
- ਸਿਰਫ ਤਦ memoize ਕਰੋ ਜਦ ਤੁਸੀਂ ਇੱਕ ਅਸਲ ਸਮੱਸਿਆ ਨੂੰ measure ਕੀਤਾ ਹੋ (ਇੱਕ ਮਹਿੰਗੀ computation, ਜਾਂ ਇੱਕ memoized ਬੱਚਾ ਜੋ ਬਹੁਤ ਜ਼ਿਆਦਾ re-render ਕਰਦਾ ਹੈ)। ਸਭ ਥਾਵਾਂ `useMemo`/`useCallback` ਦਾ ਅਗਾਂਮ ਪ੍ਰਯੋਗ ਸ਼ੋਰ ਜੋੜਦਾ ਹੈ ਅਤੇ ਹੌਲੀ ਵੀ ਹੋ ਸਕਦਾ ਹੈ। (React 19 ਦਾ compiler auto-memoize ਕਰ ਸਕਦਾ ਹੈ, ਲੋੜ ਨੂੰ ਘਟਾਇਆ ਜਾ ਸਕਦਾ ਹੈ।)

Referential ਸਥਿਰਤਾ ਕਿਉਂ ਮਾਇਨੇ ਰੱਖਦੀ ਹੈ

ਟ੍ਰੇਡ-ਅਫ਼ — ਉਨ੍ਹਾਂ ਨੂੰ ਬਹੁਤ ਜ਼ਿਆਦਾ ਵਰਤ ਨਾ ਕਰੋ

ਸੰਬੰਧਿਤ ਸਵਾਲ