Реализуйте React-компонент: запросите с сервера список пользователей и выведите его списком, предусмотрев необходимые состояния.

Компоненту нужны состояния загрузки, ошибки, пустого списка и успеха, а запрос следует отменять или игнорировать при уходе.

Предполагается GET /api/users с массивом { id, name } и уникальными ID:

import { useEffect, useState } from 'react';
export default function Users() {
  const [state, setState] = useState({ status: 'loading' });
  useEffect(() => {
    const controller = new AbortController();
    let active = true;
    async function load() {
      try {
        const response = await fetch('/api/users', { signal: controller.signal });
        if (!response.ok) throw new Error('HTTP error');
        const data = await response.json();
        if (!Array.isArray(data) || !data.every(u => u &&
          ['string', 'number'].includes(typeof u.id) && typeof u.name === 'string')) {
          throw new Error('Invalid response');
        }
        if (active) setState({ status: 'success', data });
      } catch (error) {
        if (active && !controller.signal.aborted) setState({ status: 'error' });
      }
    }
    load();
    return () => { active = false; controller.abort(); };
  }, []);
  if (state.status === 'loading') return <p role="status">Загрузка...</p>;
  if (state.status === 'error') return <p role="alert">Не удалось загрузить пользователей</p>;
  if (!state.data.length) return <p>Пользователей пока нет</p>;
  return <ul>{state.data.map(user => <li key={user.id}>{user.name}</li>)}</ul>;
}

Для production можно вынести кеш, повторы и дедупликацию в слой работы с серверными данными.

Источник: react.dev.