તમે useMemo અને useCallback ક્યારે વાપરવા જોઈએ, અને તેઓ કયો સમસ્યા હલ કરે છે?

Question

Accepted Answer

બંને કંઈક રેન્ડર્સ વચ્ચે કેશ કરે છે જેથી તે દરેક વાર ફરીથી કમ્પ્યુટ/રિક્રિએટ ન થાય:
- **`useMemo`** એક **કમ્પ્યુટ કરેલ વેલ્યુ** કેશ કરે છે.
- **`useCallback`** એક **ફંક્શનની ઓળખ** કેશ કરે છે (તે `useMemo(() => fn, deps)` છે).

તેઓ (a) મોંઘા કામ પુનરાવર્તન કરવાથી બચવા અને (b) મેમોઇઝ કરેલ ચિલ્ડ્રેન પર નિર્ભર સંદર્ભ સમાનતા તોડવાથી બચવા માટે અસ્તિત્વ ધરાવે છે.

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

## શા માટે સંદર્ભ સ્થિતિશીલતા મહત્તમ છે

`useCallback` વિનાશ્રય, `handleSelect` દરેક રેન્ડર માટે નવું ફંક્શન છે. એક `React.memo(Grid)` "નવું" પ્રોપ જોશે અને તેમ છતાં ફરીથી રેન્ડર કરશે, મેમોઇઝેશનને હરાવશે. એવજ રીતે, એક મેમોઇઝ કરેલ ચાઇલ્ડને પાસ કરેલ ઑબ્જેક્ટ અથવા `useEffect` ડિપેન્ડન્સી એરે માટે વપરાય છે.

## ટ્રેડ-ઓફ્સ — તેમનો અતિવપરાશ કરશો નહીં

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

- મેમોઇઝેશન મફત નથી: તે મેમરી જમા યોગ્ય ডિપેન્ડન્સી તુલના **દર** રેન્ડર પર છે.
- એક ખોટું/ગુમ ડિપેન્ડન્સી એરે તમને **જૂની વેલ્યુ** આપે છે — સૌથી સામાન્ય બગ.
- માત્ર જ્યારે તમે વાસ્તવિક સમસ્યા માપી હોય ત્યારે જ મેમોઇઝ કરો (મોંઘો કમ્પ્યુટેશન, અથવા મેમોઇઝ કરેલ ચાઇલ્ડ જે ઘણું વધુ રેન્ડર કરે છે). દરેક જગ્યાએ અપરિપક્વ `useMemo`/`useCallback` અવાજ ઉમેરે છે અને ધીમો પણ હોઈ શકે છે. (React 19 ના કમ્પાઇલર આપોઆપ મેમોઇઝ કરી શકે છે, આવશ્યકતા ઘટાડે છે.)