Unajifunzaje data katika React na kuepuka race conditions?

Question

Accepted Answer

Njia ya msingi hutumia `useEffect`, lakini lazima ukamatane na **cleanup** na **majibu yanayokuja kwa mpangilio mbaya**, au utapata data iliyozaa na onyo.

```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]);
}
```

## Kwa nini inamaanisha

Sema `id` inabadilika haraka kutoka `1` hadi `2`. Bila kukatisha, ombi zote mbili ziko ndani. Ikiwa ombi `1` ni polepole na kutatua **baada ya** ombi `2`, utaonyesha data ya mtumiaji `1` kwa mtumiaji `2`:

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

Kukatisha ombi lililopita (cleanup) kunarekebishe hili. Ruwaza ya zama ya boolean-flag (`let active = true; ... if (active) setUser(...)`) inakamata kitu kimoja kwa kupuuza majibu yaliyozaa.

## Katika programu za kweli, tumia maktaba

Kupakua kwa mikono kuwa kurudia na kukosa caching/karibu. **React Query (TanStack Query)** au **SWR** hukamatana na loading/error states, caching, deduplication, background refetch, na stale-while-revalidate kwako:

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

Ma frameworks kama Next.js, server-side data loaders mara nyingi ni mapendekezo.