Что такое React Hooks и для чего они нужны?react-18

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

Основные цели создания хуков

1. Упрощение логики компонентов — избавление от сложных классов
2. Переиспользование логики между компонентами
3. Разделение кода по функциональности, а не по жизненному циклу
4. Уменьшение boilerplate-кода (шаблонного кода)

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

1. useState

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

import { useState } from 'react';

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

  return (
    <button onClick={() => setCount(count + 1)}>
      Нажато {count} раз
    </button>
  );
}

2. useEffect

Объединяет функциональность componentDidMount, componentDidUpdate и componentWillUnmount:

useEffect(() => {
  // Код для выполнения после рендера
  document.title = `Вы нажали ${count} раз`;

  return () => {
    // Функция очистки (аналог componentWillUnmount)
  };
}, [count]); // Зависимости - эффект выполнится при изменении count

3. useContext

Позволяет использовать контекст без Consumer:

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

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Кнопка</button>;
}

Дополнительные хуки

useReducer

Альтернатива useState для сложной логики состояния:

const [state, dispatch] = useReducer(reducer, initialArg, init);

useCallback и useMemo

Для оптимизации производительности:

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useRef

Для доступа к DOM или хранения мутабельных значений:

const inputRef = useRef(null);
<input ref={inputRef} />;

Правила хуков

1. Вызывать только на верхнем уровне — не в циклах, условиях или вложенных функциях
2. Вызывать только из React-функций — функциональных компонентов или других хуков

Преимущества хуков

1. Упрощение кода — меньше шаблонного кода
2. Лучшая организация кода — логика группируется по функциональности
3. Переиспользование логики — с помощью кастомных хуков
4. Избегание классов — и связанных с ними проблем (this, binding)

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

Позволяют создавать собственные хуки для переиспользования логики:

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;
}

// Использование в компоненте
const width = useWindowWidth();

Резюмируем

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