Что такое Hooks?

Что такое Hooks?

Hooks — это набор функций в React 16.8+, которые позволяют использовать состояние (state), жизненный цикл (lifecycle) и другие возможности React без написания классовых компонентов. Их главная цель — упростить логику компонентов, сделать код более читаемым, повторно используемым и тестируемым, решая проблемы, связанные с классами (например, сложность повторного использования логики, большие компоненты, путаница с this).

Ключевые встроенные Hooks

1. useState — для управления состоянием

Позволяет добавлять локальное состояние в функциональные компоненты.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // Инициализация состояния

  return (
    <div>
      <p>Вы нажали {count} раз</p>
      <button onClick={() => setCount(count + 1)}>
        Нажми меня
      </button>
    </div>
  );
}

2. useEffect — для побочных эффектов

Заменяет методы жизненного цикла (componentDidMount, componentDidUpdate, componentWillUnmount). Позволяет выполнять код после рендеринга, например, загрузку данных, подписки.

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

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Выполнится после каждого рендера (аналог componentDidMount и componentDidUpdate)
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));

    // Функция очистки (аналог componentWillUnmount)
    return () => {
      console.log('Очистка эффекта');
    };
  }, []); // Пустой массив зависимостей: эффект выполнится только при монтировании

  return <div>{data ? JSON.stringify(data) : 'Загрузка...'}</div>;
}

3. useContext — для работы с контекстом

Позволяет подписываться на контекст React, избегая пропс-дриллинга (передачи данных через множество компонентов).

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext); // Получаем значение контекста
  return <button className={theme}>Кнопка с темой: {theme}</button>;
}

4. useRef — для ссылок на DOM или изменяемых значений

Создает мутабельный объект, который сохраняется между рендерами, не вызывая повторный рендер при изменении.

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

function TextInput() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus(); // Устанавливаем фокус на инпут при монтировании
  }, []);

  return <input ref={inputRef} type="text" />;
}

5. Другие полезные Hooks

• useReducer — для сложного управления состоянием (альтернатива useState).
• useCallback и useMemo — для оптимизации производительности, мемоизации функций и значений.
• useLayoutEffect — аналогичен useEffect, но выполняется синхронно после обновления DOM.
• useImperativeHandle — для кастомизации рефа, передаваемого родительскому компоненту.

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

• Вызывайте Hooks только на верхнем уровне — не внутри циклов, условий или вложенных функций.
• Используйте Hooks только в функциональных компонентах React или в кастомных Hooks.
• Соблюдайте порядок вызовов — React полагается на порядок Hooks между рендерами.

Преимущества Hooks

• Упрощение кода: Убирает сложности классов (например, привязку this).
• Повторное использование логики: Кастомные Hooks позволяют выделять общую логику.
• Лучшая композиция: Логика разделяется по функциям, а не по методам жизненного цикла.
• Улучшенная тестируемость: Функциональные компоненты с Hooks легче тестировать.

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

Можно создавать собственные Hooks для инкапсуляции логики.

import { useState, useEffect } 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; // Возвращаем текущую ширину окна
}

// Использование в компоненте
function MyComponent() {
  const width = useWindowWidth();
  return <div>Ширина окна: {width}px</div>;
}

Итог

Hooks — это революционное обновление React, которое сделало функциональные компоненты полноценными, устранив необходимость в классах для большинства задач. Они способствуют чистой архитектуре, упрощают поддержку и ускоряют разработку. В современном React (версии 17+) Hooks стали стандартом, и их изучение критически важно для любого разработчика.