Типичная задача — загрузить данные при появлении компонента. Это делают в useEffect с пустым массивом зависимостей:
function Users() { const [users, setUsers] = useState([]); const [loading, setLoading] = useState(true);
useEffect(() => { async function load() { const res = await fetch("https://api.example.com/users"); const data = await res.json(); setUsers(data); setLoading(false); } load(); }, []);
if (loading) return <p>Загрузка...</p>; return ( <ul> {users.map((u) => <li key={u.id}>{u.name}</li>)} </ul> ); }
Схема всегда одна: храним данные и флаг загрузки в состоянии, в эффекте делаем запрос, кладём результат через сеттер, а в разметке показываем то «Загрузка», то готовый список. Так строится связь интерфейса с бэкендом.