> Как использовать useEffect и useState для загрузки и отображения данных в React (React)

Для загрузки и отображения данных в React с помощью useEffect и useState используется следующий паттерн:

JSX
import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true);
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) throw new Error('Ошибка загрузки');
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []); // Пустой массив зависимостей - эффект выполняется один раз при монтировании

  if (loading) return <div>Загрузка...</div>;
  if (error) return <div>Ошибка: {error}</div>;
  return <div>{JSON.stringify(data)}</div>;
}

Ключевые моменты:

• useState управляет состояниями: данные (data), загрузка (loading), ошибка (error).

• useEffect с пустым массивом зависимостей [] выполняет запрос только при первом рендере (аналог componentDidMount).

• Асинхронная функция внутри useEffect обрабатывает запрос, обновляя состояния через сеттеры.

• Важно обрабатывать ошибки и состояние загрузки для UX.

Для повторной загрузки (например, по кнопке) можно добавить зависимость в массив useEffect или вынести логику в отдельную функцию.