Какие знаешь хуки из React 18?

Хуки в React 18: Полный Обзор

React 18 сохранил все классические хуки и добавил новые, ориентированные на конкурентные возможности. Вот полный список с пояснениями.

Основные хуки (Fundamental Hooks)

useState

Базовый хук для управления состоянием в функциональных компонентах.

const [count, setCount] = useState(0);
// setCount может принимать как значение, так и функцию
setCount(prev => prev + 1);

useEffect

Хук для выполнения побочных эффектов (side effects). Заменяет componentDidMount, componentDidUpdate, componentWillUnmount.

useEffect(() => {
  // Код эффекта
  const subscription = api.subscribe();
  
  return () => {
    // Функция очистки
    subscription.unsubscribe();
  };
}, [dependencies]); // Массив зависимостей

useContext

Позволяет использовать контекст без Consumer-компонентов.

const ThemeContext = createContext('light');
const theme = useContext(ThemeContext);

Дополнительные хуки (Additional Hooks)

useReducer

Альтернатива useState для сложной логики состояния.

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

useCallback

Мемоизирует callback-функцию, предотвращая ненужные ререндеры дочерних компонентов.

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b], // Зависимости
);

useMemo

Мемоизирует результат вычислений, оптимизируя производительность.

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

useRef

Создает мутируемый ref-объект, который сохраняется между рендерами.

const inputRef = useRef(null);
// Доступ к DOM элементу
inputRef.current.focus();

useImperativeHandle

Позволяет кастомизировать значение, передаваемое родительскому компоненту через ref.

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

useLayoutEffect

Аналог useEffect, но срабатывает синхронно после всех DOM-мутаций, но до отрисовки.

useDebugValue

Удобный хук для отладки пользовательских хуков в React DevTools.

Новые хуки в React 18

React 18 представил хуки для работы с конкурентными функциями (Concurrent Features).

useTransition

Позволяет маркировать некоторые обновления состояния как "неблокирующие" (не-urgent).

const [isPending, startTransition] = useTransition();

function handleClick() {
  startTransition(() => {
    // Обновления внутри startTransition имеют низкий приоритет
    setSearchQuery(input);
  });
}

useDeferredValue

Откладывает обновление значения, аналогично debounce, но встроенное в React.

const deferredQuery = useDeferredValue(query);
// deferredQuery будет "отставать" от актуального query

useSyncExternalStore

Специальный хук для интеграции с внешними хранилищами (Redux, Zustand и др.) в конкурентном режиме.

const state = useSyncExternalStore(
  subscribe,
  getSnapshot,
  getServerSnapshot // Опционально для SSR
);

useId

Генерирует уникальные ID, стабильные между сервером и клиентом (SSR).

const id = useId();
// Возвращает строку типа ":r1:"

Специальные хуки (Library Hooks)

Эти хуки предназначены в основном для разработчиков библиотек.

useInsertionEffect

Похож на useLayoutEffect, но срабатывает перед всеми DOM-мутациями. Предназначен для вставки стилей в CSS-in-JS библиотеках.

useInsertionEffect(() => {
  // Вставка стилей
  const style = document.createElement('style');
  document.head.appendChild(style);
});

Практические аспекты использования хуков

• Правила хуков: хуки можно вызывать только на верхнем уровне компонента, нельзя вызывать внутри условий, циклов или вложенных функций
• Пользовательские хуки: можно создавать собственные хуки, комбинируя стандартные
• Оптимизации: useMemo и useCallback требуют аккуратного использования - иногда они могут ухудшить производительность

Особенности React 18

В React 18 появилась концепция конкурентного рендеринга, и новые хуки (useTransition, useDeferredValue) позволяют:

• Приоритизировать обновления UI
• Предотвращать блокировку интерфейса при тяжелых вычислениях
• Улучшать пользовательский опыт за счет разделения обновлений на срочные и отложенные

Все хуки React являются стабильными API и полностью обратно совместимы. Новые хуки React 18 ориентированы на современные требования к производительности и отзывчивости веб-приложений.