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

Question

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 ਕਰ ਸਕਦਾ ਹੈ, ਲੋੜ ਨੂੰ ਘਟਾਇਆ ਜਾ ਸਕਦਾ ਹੈ।)