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

2 года назад·1 мин. на чтение

В этой статье напишем кастомный React хук для прослушивания ширины экрана - useResize.

Хук useResize довольно часто встречается в React приложениях. useResize - хук, который прослушивает изменения ширины экрана. Далее на основе ширины можно, например, скрывать или показывать компоненты на экране. useResize будет использовать стандартные размеры экрана из bootstrap.
БрейкпоинтidРазмер экрана
Smallsm≥576px
Mediummd≥768px
Largelg≥992px
Extra largexl≥1200px
Extra extra largexxl≥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_hook_use_Resize Исходный код

Чистые компоненты в React

год назад·2 мин. на чтение

В этой статье рассмотрим чистые компоненты в функциональных компонентах ReactJS.

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

React.memo

React.memo — это компонент высшего порядка (higher-order component, HOC). Когда компонент отображает тот же вывод при одних и тех же пропсах, вы можете обернуть свой функциональный компонент этой функцией React.memo. За счет этого улучшится производительность и оптимизируется рендеринг. React.memo работает только при изменении пропсов компонента. Это означает, что если вы используете состояние, используя хук useState, то для каждого изменения состояния он будет ререндерить компонент. С React.memo выполняется поверхностное сравнение пропсов.
Рассмотрим компонент CustomLabel и Counter, внутри которого используется CustomLabel.
// CustomLabel.jsx

import React from "react";

export const CustomLabel = ({ name }) => {
  return (
    <>
      {console.log("CustomLabel component render")}
      <label>
        <b>{name}</b>
      </label>
    </>
  );
};
// Counter.jsx

import React, { useState } from "react";
import CustomLabel from "./CustomLabel";

export const Counter = () => {
  const [counter, setCounter] = useState(0);

  return (
    <div>
      <CustomLabel name="Simple Counter app" />
      <p>Counter is: {counter}</p>
      <button onClick={() => setCounter(counter + 1)}>Click</button>
    </div>
  );
};
Компонент CustomLabel принимает name в качестве пропса и отображает его в теге label. В компонент CustomLabel мы добавили console.log(), чтобы мы могли видеть, сколько раз компонент ререндерится. Всякий раз, когда вы нажимаете кнопку, чтобы увеличить счетчик, он повторно рендерит компонент CustomLabel.
Теперь поработаем с React.memo. Обернем компонент CustomLabel в React.memo и снова будем нажимать счетчик. Увидим, что он отрендерил компонент CustomLabel только один раз, потому что проп name остается неизменным при каждом нажатии кнопки.
// CustomLabel.jsx

import React, {memo} from "react";

export const CustomLabel = memo(({ name }) => {
  return (
    <>
      {console.log("CustomLabel component render")}
      <label>
        <b>{name}</b>
      </label>
    </>
  );
});
Чистые компоненты названы так по аналогии с чистыми функциями.

Что такое чистые функции?

В Javascript функции, которые возвращают один и тот же вывод при одних и тех же входных данных, называются чистыми функциями. Таким образом, результат чистой функции зависит только от ее входных аргументов. Чистые функции также не вызывают никаких побочных эффектов. Рассмотрим чистую функцию add.
function Add(num1, num2){
  return num1 + num2;
}
Если мы вызовем вышеуказанную функцию add(2,2), она всегда будет возвращать 4. Если вызвать ее несколько раз с параметрами 2 и 2, она всегда будет возвращать 4. Благодаря тому что функция чистая можно оптимизировать и улучшить производительность приложения. Еще подробнее о чистых функциях можно прочитать в статье Чистые функции. Функциональное программирование.