Как быстро понять хук useEffect в React

React компоненты в процессе своего существования проходят разные стадии, это называется жизненным циклом компонентов. Эти этапы можно разделить на три основных этапа:

• Монтирование: компонент создается и вставляется в модель DOM
• Обновление: компонент повторно визуализируется из-за изменений в его пропсах или состоянии.
• Размонтирование: компонент удаляется из модели DOM

В этой статье мы рассмотрим три основных варианта использования хука useEffect: с пустым массивом зависимостей, с массивом зависимостей со значениями и без массива зависимостей. Давайте начнем!

1. useEffect с пустым массивом зависимостей

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

import { useEffect, useState } from "react";

export default function App() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://mock-api.com")
      .then((response) => response.json())
      .then((apiData) => {
        setData(apiData);
      });
  }, []);

  return (
    <div>
      {data && data.message}
    </div>
  );
}

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

2. useEffect со значениями в массиве зависимостей

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

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

function FilterableList({ items }) {
  const [filter, setFilter] = useState('');
  const [filteredItems, setFilteredItems] = useState(items);

  useEffect(() => {
    const filtered = items.filter(item => item.toLowerCase().includes(filter.toLowerCase()));
    setFilteredItems(filtered.length !== 0 ? filteredItems : items);
  }, [filter, items]);

  return (
    <div>
      <input type="text" value={filter} onChange={e => setFilter(e.target.value)} />
      <ul>
        {filteredItems.map(item => <li key={item}>{item}</li>)}
      </ul>
    </div>
  );
}

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

3. useEffect без массива зависимостей

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

Итоги

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

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

В первой части мы говорили о настройке маршрутизатора и упоминали BrowserRouter и NativeRouter, но это не единственные типы роутеров. Всего существует 6 роутеров, и в этой части мы подробно рассмотрим каждый из них. Серия статей о React Router v6 состоит из 4 частей.

1. Основы React Router
2. Продвинутые определения маршрутов
3. Управление навигацией
4. Подробно о роутерах (рассматривается в этой статье)

BrowserRouter

Из первой части мы уже знакомы с BrowserRouter. Это роутер по умолчанию, который вы должны использовать, если вы работаете над веб-приложением, и это роутер, который вы будете использовать в 99% всех своих приложений, поскольку он охватывает все обычные варианты использования маршрутизации. Другие роутеры, о которых поговорим далее, имеют очень специфические варианты использования.

NativeRouter

NativeRouter по сути является эквивалентом BrowserRouter, но для React Native. Если вы используете React Native, то это роутер, который вы захотите использовать.

HashRouter

Этот роутер работает очень похоже на BrowserRouter, но основное отличие заключается в том, что вместо того, чтобы изменять URL-адрес на что-то вроде http://localhost:3000/books он будет хранить URL-адрес в хэше, как http://localhost:3000/#/books. Как видите, этот URL-адрес имеет # после URL-адреса, который представляет собой хэш-часть URL-адреса. Все, что находится в хэш-части URL-адреса, является просто дополнительной информацией, которая обычно обозначает идентификатор на странице для целей прокрутки, поскольку страница будет автоматически прокручиваться до элемента с идентификатором, представленным хешем, при загрузке страницы. В React Router этот хэш на самом деле не используется для хранения идентификационной информации для прокрутки, а вместо этого он хранит информацию, связанную с текущим URL-адресом. Причина, по которой React Router делает это, заключается в том, что некоторые хостинг-провайдеры не позволяют вам фактически изменять URL-адрес вашей страницы. В этих очень редких случаях вы захотите использовать HashRouter, поскольку HashRouter не изменит фактический URL-адрес вашей страницы, а изменит только хэш вашей страницы. Если вы можете использовать какой-либо URL-адрес у своего хостинг-провайдера, то это не то, что вам следует использовать.

HistoryRouter

HistoryRouter (в настоящее время называется unstable_HistoryRouter) — это роутер, который позволяет вручную управлять объектом истории, который React Router использует для хранения всей информации, связанной с историей маршрутизации вашего приложения. Этот объект истории помогает убедиться, что такие вещи, как кнопки «Назад» и «Вперед» в браузере, работают правильно. Это роутер, который вы, вероятно, никогда не должны использовать, если у вас нет очень конкретной причины, по которой вы хотите перезаписать или контролировать поведение истории по умолчанию React Router.

MemoryRouter

MemoryRouter немного отличается от остальных роутеров, о которых мы говорили, поскольку вместо того, чтобы хранить информацию о текущем маршруте в URL-адресе браузера, этот роутер хранит информацию о роуте непосредственно в памяти. Очевидно, что это очень неподходящий роутер для обычных операций маршрутизации, но этот роутер невероятно полезен, когда вы пишете тесты для своего приложения, у которого нет доступа к браузеру. Из-за того, как работает React Router, вам необходимо, чтобы ваши компоненты были упакованы в маршрутизатор, иначе весь ваш код маршрутизации будет выдавать ошибки и ломаться. Это означает, что даже если вы хотите протестировать один компонент, вам нужно будет обернуть этот компонент внутрь маршрутизатора, иначе он будет выдавать ошибки. Если вы тестируете свой код таким образом, что у него нет доступа к браузеру (например, модульное тестирование), то маршрутизаторы, о которых мы говорили до сих пор, будут выдавать ошибки, поскольку все они зависят от URL-адреса в браузере. MemoryRouter, с другой стороны, хранит всю свою информацию в памяти, что означает, что он никогда не обращается к браузеру и идеально подходит при модульном тестировании компонентов. Однако, за исключением этого конкретного случая использования, этот маршрутизатор никогда не будет использоваться.

StaticRouter

Роутер StaticRouter также имеет очень специфический вариант использования. Этот маршрутизатор специально предназначен для серверного рендеринга ваших приложений React, поскольку он принимает один проп location и визуализирует ваше приложение, используя этот location в качестве URL-адреса. Этот роутер на самом деле не может выполнять какую-либо маршрутизацию и будет просто отображать одну статическую страницу, но это идеально подходит для рендеринга на сервере, поскольку вы хотите просто отобразить HTML вашего приложения на сервере, а затем клиент может настроить всю вашу маршрутизацию и так далее.

<StaticRouter location="/books">
  <App />
</StaticRouter>

Итоги

React Router — это огромная библиотека с множеством удивительных функций, поэтому она является популярной библиотекой для маршрутизации. Очень интересна реализация вложенных маршрутов, поскольку это значительно упрощает создание интуитивно понятных маршрутов.