---
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');
```

11. **useTransition:** позволяет вам обновлять состояние без блокировки пользовательского интерфейса. Он особенно полезен для оптимизации
      производительности при медленных рендерах или когда вам нужно отложить менее важные обновления.

```jsx
import {useTransition} from 'react';

function MyComponent() {
  const [isPending, startTransition] = useTransition();

  // ...
}
```

- `startTransition` - функция, которая позволяет пометить обновления состояния как переходные (неблокирующие)
- `isPending` - булево значение, указывающее, активен ли в данный момент переход

**Когда использовать**
- **Медленные рендеры:** Когда у вас есть сложные вычисления или тяжелые компоненты, которые могут заблокировать UI
- **Отложенные обновления:** Когда некоторые обновления состояния могут быть отложены в пользу более важных
- **Улучшение воспринимаемой производительности:** Чтобы пользователь видел немедленный отклик на свои действия
  
**Особенности**
- **Приоритизация обновлений:** Обновления внутри startTransition имеют более низкий приоритет
- **Индикация загрузки:** isPending позволяет показать пользователю, что происходит фоновая загрузка
- **Совместимость с Suspense:** Хорошо работает вместе с Suspense для плавных переходов между состояниями
  **Отличие от других подходов**
- **useDeferredValue:** Вместо управления обновлениями, откладывает значение
- **setTimeout:** useTransition интегрирован в планировщик React и работает более предсказуемо

12. **useDeferredValue** позволяет отложить обновление части UI, чтобы избежать блокировки основного потока при выполнении ресурсоемких операций. Он похож на `debounce` или `throttle`, но интегрирован в механизм рендеринга React.
    
**Когда использовать**
    - Оптимизация производительности при работе с медленными или тяжелыми компонентами 
    - Отложенный рендеринг не критичных частей интерфейса
    - Синхронизация нескольких состояний, когда одно зависит от другого, но может обновляться с задержкой
```jsx
import { useDeferredValue } from 'react';

function MyComponent({ value }) {
  const deferredValue = useDeferredValue(value);
  
  // ...
}
```

🚀 **_Источник: DeepSeek_** \
🚀 **Источник: [YT: useTransition и useDeferredValue хуки в React](https://www.youtube.com/watch?v=hWUlv7M7rR8)**