Что такое кастомный хук

1️⃣ Как кратко ответить

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

2️⃣ Подробное объяснение темы

В React хуки позволяют использовать состояние и другие возможности React в функциональных компонентах. Кастомные хуки — это способ создания собственных хуков, которые инкапсулируют и переиспользуют логику, общую для нескольких компонентов.

Зачем нужны кастомные хуки

1. Переиспользование логики: Если у вас есть несколько компонентов, которые используют одну и ту же логику, вы можете вынести эту логику в кастомный хук, чтобы избежать дублирования кода.
2. Чистота кода: Кастомные хуки помогают сделать код компонентов более чистым и читаемым, так как они скрывают сложную логику за простым интерфейсом.
3. Тестируемость: Логику, вынесенную в кастомные хуки, легче тестировать отдельно от компонентов.

Как работают кастомные хуки

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

Пример кастомного хука

Рассмотрим пример кастомного хука, который отслеживает ширину окна браузера:

import { useState, useEffect } from 'react';
​
// Кастомный хук useWindowWidth
function useWindowWidth() {
  // Создаем состояние для хранения ширины окна
  const [width, setWidth] = useState(window.innerWidth);
​
  // Эффект, который обновляет ширину при изменении размера окна
  useEffect(() => {
    // Функция-обработчик для обновления ширины
    const handleResize = () => setWidth(window.innerWidth);
​
    // Добавляем обработчик события resize
    window.addEventListener('resize', handleResize);
​
    // Убираем обработчик при размонтировании компонента
    return () => window.removeEventListener('resize', handleResize);
  }, []); // Пустой массив зависимостей означает, что эффект выполнится только при монтировании и размонтировании
​
  // Возвращаем текущее значение ширины
  return width;
}

Объяснение кода

• Импорт хуков: useState и useEffect импортируются из React, чтобы управлять состоянием и побочными эффектами.
• Состояние width: Используется useState для хранения текущей ширины окна. Изначально оно устанавливается в window.innerWidth.
• Эффект useEffect: Используется для добавления и удаления обработчика события resize. Это позволяет обновлять состояние width при изменении размера окна.
• Возврат значения: Хук возвращает текущее значение ширины окна, которое можно использовать в компонентах.

Применение кастомного хука

Теперь, когда у нас есть кастомный хук useWindowWidth, мы можем использовать его в любом компоненте:

import React from 'react';
import useWindowWidth from './useWindowWidth'; // Импортируем кастомный хук
​
function MyComponent() {
  // Используем кастомный хук для получения ширины окна
  const width = useWindowWidth();
​
  return (
    <div>
      <p>Current window width: {width}px</p>
    </div>
  );
}
​
export default MyComponent;

Объяснение применения

• Импорт хука: useWindowWidth импортируется в компонент.
• Использование хука: Внутри компонента вызывается useWindowWidth, и его возвращаемое значение (ширина окна) сохраняется в переменной width.
• Отображение данных: Ширина окна отображается в элементе <p>.

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