Какие React-хуки вы знаете?

Что такое React-хуки?

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

Основные встроенные хуки

• useState — добавляет локальное состояние. Возвращает массив из текущего значения и функции для его обновления.
• useEffect — выполняет побочные эффекты (запросы, подписки, таймеры) после рендера. Можно управлять зависимостями, чтобы контролировать, когда эффект запускается.
• useContext — позволяет читать значение контекста, созданного через React.createContext, без прокидывания пропсов через каждый уровень.
• useReducer — альтернатива useState для более сложной логики состояния, основанной на действиях (похоже на Redux).
• useMemo — мемоизирует результат вычисления, чтобы избежать повторных дорогих операций при каждом рендере.
• useCallback — мемоизирует функцию, чтобы она не пересоздавалась при каждом рендере, если зависимости не изменились.
• useRef — создаёт изменяемый объект, который сохраняется между рендерами, часто используется для доступа к DOM-элементам.

Пример использования

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

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(prev => prev + 1);
    }, 1000);
    return () => clearInterval(interval); // очистка при размонтировании
  }, []); // пустой массив — эффект выполняется один раз

  return <div>Прошло секунд: {seconds}</div>;
}

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

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

Вывод

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