Хук useResize для отслеживания ширины экрана в ReactJS

Хук useResize довольно часто встречается в React приложениях. useResize - хук, который прослушивает изменения ширины экрана. Далее на основе ширины можно, например, скрывать или показывать компоненты на экране. useResize будет использовать стандартные размеры экрана из bootstrap.

Брейкпоинт	id	Размер экрана
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px

Добавим эти брейкпоинты в файл констант размеров экрана.

// const-breakpoints.js
export const SCREEN_SM = 576;
export const SCREEN_MD = 768;
export const SCREEN_LG = 992;
export const SCREEN_XL = 1200;
export const SCREEN_XXL = 1400;

useResize будет возвращать ширину экрана, а также индикаторы достижения брейкпоинтов. Подпишемся на событие resize из window. Значение ширины экрана будем читать из поля innerWidth.

// use-resize.js
import { useState, useEffect } from 'react';
import {
  SCREEN_SM, SCREEN_MD, SCREEN_LG, SCREEN_XL, SCREEN_XXL,
} from './const-breakpoints';

export const useResize = () => {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = (event) => {
      setWidth(event.target.innerWidth);
    };
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return {
    width,
    isScreenSm: width >= SCREEN_SM,
    isScreenMd: width >= SCREEN_MD,
    isScreenLg: width >= SCREEN_LG,
    isScreenXl: width >= SCREEN_XL,
    isScreenXxl: width >= SCREEN_XXL,
  };
};

Пример работы

При достижении ширины экрана 799px, флаги isScreenSm и isScreenMd будут иметь значения true. Исходный код

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, вы сможете эффективно справляться с побочными эффектами и жизненными циклами компонентов. Не забывайте использовать эти знания с умом и адаптировать их к потребностям ваших проектов.