Кастомный хук - это просто функция, которая начинается с префикса use и использует один или несколько хуков React. Например, мы можем создать кастомный хук, который будет возвращать текущую ширину экрана:

import { useEffect, useState } from "react"
 
function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth)
 
  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth)
    window.addEventListener("resize", handleResize)
    return () => window.removeEventListener("resize", handleResize)
  }, [])
 
  return width
}

В этом примере мы создаем функцию useWindowWidth(), которая использует хуки useState() и useEffect() для отслеживания ширины окна браузера. Внутри функции мы определяем состояние width, которое будет содержать текущую ширину окна. Мы используем хук useEffect() для добавления слушателя события resize при монтировании компонента и удаления его при размонтировании. Когда ширина окна изменяется, мы вызываем функцию setWidth() для обновления состояния.

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

function MyComponent() {
  const width = useWindowWidth()
 
  return <p>Window width: {width}</p>
}

В этом примере мы используем кастомный хук useWindowWidth() в компоненте MyComponent и сохраняем результат в переменную width. Мы отображаем текущую ширину окна внутри элемента p.

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

Назад