તમે React માં ડેટા કેવી રીતે લાવો છો અને રેસ કન્ડિશન્સ કેવી રીતે ટાળો છો?

Question

Accepted Answer

મૂળભૂત અભિગમ `useEffect` નો ઉપયોગ કરે છે, પરંતુ તમે **સાફ કરવું** અને **બહારના ક્રમમાં પ્રતિક્રિયાઓ** સંભાળવી જોઈએ, અથવા તમને અમલવર્તી ડેટા અને સતર્કતાઓ મળશે.

```jsx
function User({ id }) {
  const [user, setUser] = useState(null);
  const [error, setError] = useState(null);

useEffect(() => {
    const ctrl = new AbortController();
    fetch(`/api/users/${id}`, { signal: ctrl.signal })
      .then(r => r.json())
      .then(setUser)
      .catch(e => { if (e.name !== "AbortError") setError(e); });

return () => ctrl.abort(); // cancel the in-flight request when id changes/unmounts
  }, [id]);
}
```

## આ રેસ કન્ડીશન જે રોકે છે

ધારો કે `id` ઝડપથી `1` થી `2` માં બદલાય છે. રદ્દીકરણ વિના, બંને વિનંતીઓ ચાલુ છે. જો વિનંતી `1` ધીમી હોય અને વિનંતી `2` ના **પછી** હલ થાય, તો તમે વપરાશકર્તા `1` નો ડેટા વપરાશકર્તા `2` માટે દર્શાવશો:

```text
fetch(1) ───────────(slow)──────▶ setUser(user1)  ❌ shown last, but wrong
fetch(2) ──(fast)──▶ setUser(user2)
```

પાછલી વિનંતીને રદ્દ કરવું (સાફ કરવું) આ સમસ્યાને ઠીક કરે છે. જૂનું બુલિયન-ફ્લેગ પેટર્ન (`let active = true; ... if (active) setUser(...)`) અમલવર્તી પ્રતિક્રિયાઓને અવગણીને સમાન હાથ ધરે છે.

## વાસ્તવિક અપ્લીકેશન્સમાં, લાઇબ્રેરી વાપરો

મેનુઅલ લાવવું પુનરાવર્તિત થાય છે અને કેશીંગ/પુનઃપ્રયાસ મિસ કરે છે. **React Query (TanStack Query)** અથવા **SWR** તમારા માટે લોડીંગ/ભૂલ સ્થિતિઓ, કેશીંગ, નકલ, પૃષ્ઠભૂમિ પુનઃતાજેતરણ, અને અમલવર્તી-જ્યારે-પુનઃસત્યાપન સંભાળે છે:

```jsx
const { data, isLoading, error } = useQuery({ queryKey: ["user", id], queryFn: () => getUser(id) });
```

Next.js જેવા ફ્રેમવર્ક્સ સાથે, સર્વર-સાઇડ ડેટા લોડર્સ ઘણીવાર વધુ યોગ્ય છે.