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

Теория

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

Основная идея useEffect заключается в том, что он выполняется после каждого рендера компонента, по умолчанию. То есть, при каждом обновлении состояния или пропсов компонента, useEffect может быть использован для выполнения какой-либо логики. Это помогает в управлении жизненным циклом компонента и взаимодействии с внешними ресурсами.

Синтаксис useEffect выглядит так:

useEffect(() => {
  // Код для выполнения побочных эффектов
}, [dependencies]);

• Функция, переданная в useEffect, будет выполняться после каждого рендера компонента.
• В массиве зависимостей [dependencies] указываются переменные или значения, от которых зависит выполнение useEffect. Если одна из зависимостей изменится между рендерами, useEffect будет снова вызван. Если массив зависимостей пустой, useEffect будет вызываться только после монтирования и демонтирования компонента, а не при каждом обновлении.

Например, чтобы выполнить какой-то код только при монтировании компонента (аналог componentDidMount в классовых компонентах), можно использовать useEffect без зависимостей:

Например, чтобы выполнить какой-то код только при монтировании компонента (аналог componentDidMount в классовых компонентах), можно использовать useEffect без зависимостей:

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

Практика

Давайте рассмотрим пример использования useEffect в контексте приложения Todolist (список дел).

Предположим, у нас есть компонент Todolist, который должен загрузить список задач из API при монтировании и обновить их при изменении определенных зависимостей, например, при изменении фильтра задач.

Вот пример кода:

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

function Todolist() {
  const [tasks, setTasks] = useState([]);
  <span class="hljs-keyword">const</span> [filteredTasks, setFilteredTasks] = <span class="hljs-title function_">useState</span>([]);
  const [filter, setFilter] = useState('all');

  // Загрузка задач из API при монтировании компонента
  useEffect(() => {
    // Здесь можно использовать fetch или другой метод для загрузки данных
    fetch('/api/tasks')
      .then((response) => response.json())
      .then((data) => setTasks(data))
      .catch((error) => console.error('Ошибка при загрузке задач', error));
  }, []);

  // Обновление задач при изменении фильтра
  useEffect(() => {
    // Здесь можно добавить логику для фильтрации задач в соответствии с выбранным фильтром
    const filteredTasks = tasks.filter((task) => {
      if (filter === 'all') {
        return true;
      } else if (filter === 'completed') {
        return task.completed;
      } else {
        return !task.completed;
      }
    });

    // Обновляем список задач
    setFilteredTasks(filteredTasks);
  }, [filter]);

  // JSX для отображения задач и фильтра
  return (
    <div>
      <h1>Список задач</h1>
      <div>
        <button onClick={() => setFilter('all')}>Все</button>
        <button onClick={() => setFilter('completed')}>Завершенные</button>
        <button onClick={() => setFilter('uncompleted')}>Незавершенные</button>
      </div>
      <ul>
        {filteredTasks.map((task) => (
          <li key={task.id}>{task.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default Todolist;

Этот код представляет собой компонент Todolist в React, который отвечает за отображение и фильтрацию списка задач. Вот краткое описание того, что происходит в этом коде:

1. Импортируются необходимые библиотеки и хуки React: useState и useEffect.
2. Создаются два состояния: tasks и filter, с помощью хука useState. tasks хранит список задач, а filter — текущий фильтр для отображения задач.
3. Используется useEffect для выполнения загрузки задач из API при монтировании компонента. Загруженные данные сохраняются в состоянии tasks.
4. Еще один useEffect отслеживает изменения фильтра и пересчитывает отфильтрованный список задач в зависимости от выбранного фильтра. Результат сохраняется в переменной filteredTasks, которая также обновляет состояние tasks.
5. Возвращается JSX, который отображает список задач и фильтры. При нажатии на кнопки фильтров вызывается функция setFilter, чтобы изменить текущий фильтр.
6. В списке задач используется map, чтобы отобразить каждую задачу в виде элемента списка <li>, используя данные из filteredTasks