Yaya za ka kawo da bayani a cikin React kuma ka guje wa yanayin tsokacin tsokaci?

Question

Accepted Answer

Hanyar asali tana amfani da `useEffect`, amma dole ne ka gudanar da **tsarkakewa** da **amsa mara jiya**, ko zaka sami bayani da tsankwance da gargadi.

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

## Yanayin tsokaci da wannan ya kare

Cewa `id` ya canja da sauri daga `1` zuwa `2`. Ba tare da soke ba, bukatun duka biyu suna jira. Idan bukatun `1` a hankali kuma ya warware **bayan** bukatun `2`, za ka nuna bayani na mai amfani `1` ga mai amfani `2`:

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

Sokawa bukatun da ya gabata (tsarkakewa) ya warwarewa matsalar. Tsohon alemi na boolean (`let active = true; ... if (active) setUser(...)`) yana samar da iri daya ta hanyar yi watsi da amsa mara jiya.

## A cikakken aikace-aikace, yi amfani da farangisti

Manual ja da jiya ya zama mai sake ba tare da anjiya/sake kowaye ba. **React Query (TanStack Query)** ko **SWR** suna gudanar da halaye na loda/kuskure, anjiya, deduplitashon, sake sabunta a baje, da tsoho-yayin-haske-gabatarwa alal'e:

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

Tare da frameworks kamar Next.js, mai karɓo na bayani na gida a yau da kullun ya fi dacewa.