Представьте, что вы менеджер отеля, который хочет, чтобы ваши гости чувствовали себя комфортно. Вы начинаете с того, что обустраиваете комнаты и следите за тем, чтобы все было чисто и организовано. Однако по мере того, как гости прибывают и регистрируются, их потребности и предпочтения могут измениться. Некоторые гости могут запросить дополнительные полотенца или подушки, а другие могут попросить порекомендовать местные рестораны или достопримечательности.

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

Например, вы можете использовать хук useEffect для получения новых данных из API, когда пользователь взаимодействует с компонентом, или для обновления состояния компонента на основе изменений в URL-адресе браузера.

Подобно тому, как персонал отеля работает над тем, чтобы номер каждого гостя был чистым и комфортным, а также предоставлял персонализированные рекомендации и услуги, хук useEffect помогает вашему компоненту реагировать на изменения в окружающей среде и выполнять действия, не связанные напрямую с рендерингом.

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

Давайте начнем с простого примера, который показывает, как использовать хук useEffect в компоненте.

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

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

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(count => count + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <div>{count}</div>;
}

export default Counter;

Вот разбивка того, что происходит в этом коде:

  1. Мы импортируем хуки useState и useEffect из пакета react.
  2. Мы определяем компонент Counter, который использует хук useState для создания переменной состояния count, начинающейся с 0, и функцию setCount для обновления счетчика.
  3. Мы используем хук useEffect для настройки таймера, который обновляет счетчик каждую секунду. Хук useEffect принимает два аргумента: функцию, устанавливающую таймер, и массив зависимостей, указывающий, когда эффект должен быть перезапущен.
  4. Функция, устанавливающая таймер, создает новый интервал, обновляющий счетчик на 1 каждую секунду с помощью функции setCount. Функция setCount вызывается с функцией, которая принимает предыдущий счетчик в качестве аргумента и возвращает новый счетчик, чтобы гарантировать, что мы всегда работаем с последним счетчиком.
  5. Хук useEffect возвращает функцию очистки, которая очищает интервал, когда компонент размонтирован, чтобы предотвратить утечку памяти.
  6. Мы визуализируем текущий счетчик в элементе div.

когда использовать хуки useState и useEffect, вот несколько общих рекомендаций:

  • Используйте хук useState, когда вам нужно управлять состоянием вашего компонента, например пользовательским вводом или данными приложения.
  • Используйте хук useEffect, когда вам нужно управлять побочными эффектами в вашем компоненте, такими как выборка данных из API, обновление заголовка документа или настройка таймеров.
  • Используйте оба хука вместе, когда вам нужно синхронизировать состояние и побочные эффекты в вашем компоненте.

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

Получение данных из API:

В этом примере мы будем получать данные из API с помощью хука useEffect и обновлять состояние с помощью полученных данных. Мы создадим компонент PostList, который отображает список сообщений.

// PostList.js

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

function PostList() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((response) => response.json())
      .then((data) => setPosts(data));
  }, []);

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default PostList;

Импортируйте useEffect и useState из библиотеки React:

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

Создайте функциональный компонент:

function MyComponent() {
  // code goes here
}

Инициализируйте переменную состояния для хранения данных, которые мы будем получать из API:

function MyComponent() {
  const [data, setData] = useState([]);
}

Используйте хук useEffect для получения данных из API:

function MyComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  // rest of the code goes here
}

Здесь мы используем хук useEffect для получения данных из API. Первый аргумент useEffect — это функция, которая будет вызываться после рендеринга компонента. Внутри этой функции мы используем метод fetch для выполнения запроса GET к конечной точке API. Когда ответ получен, мы конвертируем его в JSON с помощью метода json, а затем обновляем переменную состояния data с помощью функции setData. Второй аргумент useEffect — это пустой массив, что означает, что этот эффект сработает только один раз, после монтирования компонента.

function MyComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>
          <h2>{item.title}</h2>
          <p>{item.description}</p>
        </div>
      ))}
    </div>
  );
}
  1. Здесь мы визуализируем полученные данные с помощью метода map. Мы предполагаем, что API возвращает массив объектов, где каждый объект имеет свойства id, title и description.

2. Все! Это базовый пример того, как получать данные из API с помощью хука useEffect в функциональном компоненте. Конечно, здесь есть много вариаций и сложностей, в зависимости от используемого вами API и конкретного варианта использования.

Настройка подписки с помощью useEffect:

В этом примере мы будем использовать хук useEffect для настройки подписки на источник данных в реальном времени. Мы создадим компонент Clock, который отображает текущее время.

// Clock.js

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

function Clock() {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const timer = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(timer);
  }, []);

  return (
    <div>
      <h1>Current time: {time.toLocaleTimeString()}</h1>
    </div>
  );
}

export default Clock;
  1. Создайте новый файл с именем Clock.js и импортируйте React, useState и useEffect.

2. Создайте функциональный компонент с именем Clock и объявите переменную состояния с именем time с useState. Инициализируйте time текущей датой, используя конструктор Date().

3. Используйте хук useEffect для настройки подписки, которая обновляет переменную состояния time каждую секунду. Внутри функции обратного вызова useEffect вызовите setInterval с функцией обратного вызова, которая обновляет time с использованием setTime и интервалом 1000 мс (1 секунда).

4. Возвратите JSX, который отображает текущее время, используя метод toLocaleTimeString для переменной состояния time.

5. Экспортируйте компонент Clock с помощью export default

6. В файле App.js импортируйте компонент Clock и визуализируйте его.

7. вот и все! Теперь, когда вы запускаете приложение React, компонент Clock будет отображать текущее время и обновляться каждую секунду.