Как получить данные в React и избежать race conditions?

Question

Accepted Answer

Базовый подход использует `useEffect`, но вы должны обработать **cleanup** и **неупорядоченные ответы**, иначе вы получите устаревшие данные и предупреждения.

```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)
```

Отмена предыдущего запроса (cleanup) это исправляет. Более старый паттерн с булевым флагом (`let active = true; ... if (active) setUser(...)`) достигает того же, игнорируя устаревшие ответы.

## В реальных приложениях используйте библиотеку

Манual fetching становится повторяющимся и упускает кэширование/повторные попытки. **React Query (TanStack Query)** или **SWR** обрабатывают состояния loading/error, кэширование, дедупликацию, фоновое обновление и stale-while-revalidate для вас:

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

С фреймворками вроде Next.js загрузчики данных на сервере часто предпочтительнее.