В React, начиная с версии 16.8, хуки предоставляют функциональным компонентам возможность управлять состоянием и использовать жизненные циклы, которые ранее были доступны только классовым компонентам.
Вот основные встроенные хуки:
useState: Позволяет добавить внутреннее состояние к функциональному компоненту. Возвращает пару: текущее состояние и функцию для его обновления.
javascript
useEffect: Позволяет выполнять побочные эффекты в функциональных компонентах. Схож с методами жизненного цикла классовых компонентов (componentDidMount, componentDidUpdate, componentWillUnmount).
javascript
useContext: Позволяет подписаться на изменения контекста React. Принимает объект контекста, созданный с помощью React.createContext().
javascript
useReducer: Альтернатива useState для управления более сложным состоянием, которое включает несколько подзначений или когда следующее состояние зависит от предыдущего. Похож на редюсеры в Redux.
javascript
useCallback: Мемоизирует функцию-обратного вызова. Возвращает мемоизированную версию колбэка, которая изменяется только при изменении одной из зависимостей. Полезно для предотвращения ненужных перерисовок дочерних компонентов при передаче колбэков.
javascript
useMemo: Мемоизирует вычисляемое значение. Возвращает мемоизированное значение, которое пересчитывается только при изменении одной из зависимостей. Полезно для производительности при дорогих вычислениях.
javascript
useRef: Позволяет создать мутабельный ref, который сохраняется в течение всего жизненного цикла компонента. Часто используется для доступа к элементам DOM или хранения любого мутабельного значения, которое не вызывает перерисовок при изменении.
javascript
useImperativeHandle: Настраивает дескриптор экземпляра, который предоставляется родительскому компоненту при использовании ref. Позволяет дочернему компоненту раскрывать определенные методы родительскому компоненту. Используется совместно с forwardRef.
javascript
useLayoutEffect: Идентичен useEffect, но выполняется синхронно после всех мутаций DOM. Полезен для чтения данных из DOM или выполнения мутаций, которые необходимо сделать до того, как браузер перерисует экран. Может блокировать рендеринг.
javascript
useDebugValue: Отображает пользовательскую метку для хуков в React DevTools. Используется в пользовательских хуках для отладки.
javascript
Помимо встроенных хуков, существуют также пользовательские хуки (Custom Hooks). Это JavaScript-функции, имена которых начинаются с "use". Они позволяют повторно использовать логику состояния между компонентами. Пользовательский хук может вызывать другие хуки.
javascript
Важно соблюдать Правила хуков: