Хуки в React: useEffect

Хук useEffect в React предназначен для работы с побочными эффектами в функциональных компонентах. Он позволяет выполнять код, связанный с побочными эффектами, после того, как компонент был отрисован на экране. Вот пример использования useEffect для загрузки данных из API:

Загрузка данных из API с использованием useEffect:

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

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };

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

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return (
    <div>
      <h1>Data from API</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default DataFetching;

В этом примере хук useEffect используется для выполнения асинхронного запроса к API и обновления состояния компонента в зависимости от результата. Запрос выполняется один раз после монтирования компонента, благодаря пустому массиву зависимостей.

Дополнительные возможности useEffect:

• Выполнение эффекта при изменении зависимостей:

  Если вы хотите, чтобы эффект выполнялся при изменении определенных зависимостей, вы можете указать их в массиве зависимостей:

useEffect(() => {
  // Этот код выполнится при каждом изменении переменной dependency
  console.log('Dependency changed!');
}, [dependency]);

• Очистка эффекта:

  Вы можете возвращать функцию из useEffect, которая будет вызвана при размонтировании компонента или при изменении зависимостей:

useEffect(() => {
  // Этот код выполнится при монтировании
  return () => {
    // Этот код выполнится при размонтировании
  };
}, []); // Пустой массив зависимостей для выполнения при монтировании

Хук useEffect предоставляет удобный способ управления побочными эффектами в функциональных компонентах React.