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

Давайте разберем основные концепции хуков:

1. Зачем нужны React Hooks?

До появления хуков логика с отслеживанием состояния могла быть реализована только в компонентах класса. Функциональные компоненты не имели состояния, что делало их менее универсальными. Хуки были добавлены в:

• Разрешить логику с отслеживанием состояния в функциональных компонентах.
• Легко разделяйте логику с сохранением состояния между компонентами.
• Избегайте шаблонного кода (например, методов жизненного цикла в компонентах класса).
• Улучшите повторное использование компонентов и модульность.

2. Основные правила использования хуков

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

• Вызывайте хуки только на верхнем уровне: хуки следует вызывать в верхней части функции, а не внутри циклов, условий или вложенных функций. Это гарантирует, что React вызывает хуки в одном и том же порядке каждый раз при рендеринге компонента.
• Вызывайте хуки только из функций React: вы можете использовать хуки в функциональных компонентах или пользовательских хуках, но не в обычных функциях JavaScript.

3. Встроенные хуки React

Давайте рассмотрим некоторые ключевые встроенные хуки в React:

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

Синтаксис:

const [state, setState] = useState(initialState);

• state: Текущее значение состояния.
• setState: Функция, позволяющая обновить состояние.
• initialState: Начальное значение состояния.

useEffect
useEffect — это перехватчик, используемый для обработки побочных эффектов в функциональных компонентах. Это может включать получение данных, подписки или прямое взаимодействие с DOM.

Синтаксис:

useEffect(() => {
  // Side effect code
  return () => {
    // Cleanup (optional)
  };
}, [dependencies]);

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

4. Другие полезные крючки

useMemo: запоминает вычисленное значение, чтобы избежать перерасчета при каждом рендеринге.
useCallback: запоминает функцию, чтобы избежать ее повторного создания при каждом рендеринге.
useLayoutEffect: аналогично useEffect, но срабатывает синхронно после всех мутаций DOM.

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

• Чистый код: Хуки облегчают чтение и понимание компонентов.
• Повторное использование: Хуки позволяют обмениваться логикой между компонентами без HOC или реквизитов рендеринга.
• Лучшее управление состоянием: Более детальный контроль состояния и побочных эффектов.
• Преимущества функциональных компонентов: Позволяет полностью использовать функциональное программирование в компонентах React.

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