---
sidebar_position: 5
---

# Базовые хуки React

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

1. **useState:**
   - Позволяет добавлять состояние в функциональный компонент.
   - Возвращает массив, где первый элемент — текущее значение состояния, а второй — функция для его обновления.
```js
const [count, setCount] = useState(0);
```
2. **useEffect:**
   - Позволяет выполнять побочные эффекты в функциональных компонентах (например, запросы к API, подписки, ручное изменение DOM).
   - Принимает два аргумента: функцию с эффектом и массив зависимостей (опционально).
```js
useEffect(() => {
  document.title = `Вы нажали ${count} раз`;
}, [count]);
```
3. **useContext:**
   - Позволяет использовать контекст в функциональных компонентах.
   - Принимает объект контекста (созданный с помощью `React.createContext`) и возвращает текущее значение контекста.
```js
const value = useContext(MyContext);
```
4. **useReducer:**
   - Альтернатива `useState` для управления сложным состоянием.
   - Принимает редюсер (функцию, которая определяет, как состояние должно обновляться) и начальное состояние.
   - Возвращает текущее состояние и функцию `dispatch` для отправки действий.
```js
const [state, dispatch] = useReducer(reducer, initialState);
```
5. **useCallback:**
   - Возвращает мемоизированную версию колбэка, которая изменяется только при изменении зависимостей.
   - Полезен для оптимизации производительности, когда колбэк передается в дочерние компоненты.
```js
const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);
```
6. **useMemo:**
   - Возвращает мемоизированное значение, которое пересчитывается только при изменении зависимостей.
   - Полезен для оптимизации вычислений, которые требуют больших затрат ресурсов.
```js
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
```
7. **useRef:**
   - Возвращает изменяемый объект, свойство `.current` которого инициализируется переданным аргументом.
   - Используется для хранения мутабельных значений, которые не вызывают ререндер при изменении.
   - Также может использоваться для получения ссылок на DOM-элементы.
```js
const inputRef = useRef(null);
```
8. **useImperativeHandle:**
   - Позволяет настроить экземпляр значения, которое будет доступно при использовании `ref`.
   - Обычно используется вместе с `forwardRef`.
```js
useImperativeHandle(ref, () => ({
  focus() {
    inputRef.current.focus();
  }
}));
```
9. **useLayoutEffect:**
   - Похож на `useEffect`, но выполняется синхронно после всех изменений DOM, но до того, как браузер отрисует изменения.
   - Используется для измерений DOM или других операций, которые должны быть выполнены до отрисовки.
```js
useLayoutEffect(() => {
  // Логика, которая должна выполниться до отрисовки
}, [dependencies]);
```
10. useDebugValue:
    - Используется для отладки пользовательских хуков.
    - Позволяет отображать метку для пользовательских хуков в инструментах разработчика React.
```js
useDebugValue(isOnline ? 'Online' : 'Offline');
```

🚀 **_Источник: DeepSeek_**