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

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

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

const [count, setCount] = useState(0);

2. useEffect:
   • Позволяет выполнять побочные эффекты в функциональных компонентах (например, запросы к API, подписки, ручное изменение DOM).
   • Принимает два аргумента: функцию с эффектом и массив зависимостей (опционально).

useEffect(() => {
  document.title = `Вы нажали ${count} раз`;
}, [count]);

3. useContext:
   • Позволяет использовать контекст в функциональных компонентах.
   • Принимает объект контекста (созданный с помощью React.createContext) и возвращает текущее значение контекста.

const value = useContext(MyContext);

4. useReducer:
   • Альтернатива useState для управления сложным состоянием.
   • Принимает редюсер (функцию, которая определяет, как состояние должно обновляться) и начальное состояние.
   • Возвращает текущее состояние и функцию dispatch для отправки действий.

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

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

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

6. useMemo:
   • Возвращает мемоизированное значение, которое пересчитывается только при изменении зависимостей.
   • Полезен для оптимизации вычислений, которые требуют больших затрат ресурсов.

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

7. useRef:
   • Возвращает изменяемый объект, свойство .current которого инициализируется переданным аргументом.
   • Используется для хранения мутабельных значений, которые не вызывают ререндер при изменении.
   • Также может использоваться для получения ссылок на DOM-элементы.

const inputRef = useRef(null);

8. useImperativeHandle:
   • Позволяет настроить экземпляр значения, которое будет доступно при использовании ref.
   • Обычно используется вместе с forwardRef.

useImperativeHandle(ref, () => ({
  focus() {
    inputRef.current.focus();
  }
}));

9. useLayoutEffect:
   • Похож на useEffect, но выполняется синхронно после всех изменений DOM, но до того, как браузер отрисует изменения.
   • Используется для измерений DOM или других операций, которые должны быть выполнены до отрисовки.

useLayoutEffect(() => {
  // Логика, которая должна выполниться до отрисовки
}, [dependencies]);

10. useDebugValue:
    • Используется для отладки пользовательских хуков.
    • Позволяет отображать метку для пользовательских хуков в инструментах разработчика React.

useDebugValue(isOnline ? 'Online' : 'Offline');

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

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.

Когда использовать

• Оптимизация производительности при работе с медленными или тяжелыми компонентами
• Отложенный рендеринг не критичных частей интерфейса
• Синхронизация нескольких состояний, когда одно зависит от другого, но может обновляться с задержкой

import { useDeferredValue } from 'react';

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

🚀 Источник: DeepSeek
🚀 Источник: YT: useTransition и useDeferredValue хуки в React