Какие знаешь новые хуки React v18?

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

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

1. useId

Хук useId генерирует уникальные идентификаторы, которые стабильны между серверным и клиентским рендерингом, что критично для SSR (Server-Side Rendering) и гидратации. Раньше разработчики использовали нестабильные методы, например, Math.random(), что приводило к рассогласованию между сервером и клиентом. useId решает эту проблему.

import { useId } from 'react';

function Form() {
  const id = useId(); // Генерирует уникальный ID, например, ":r1:"
  
  return (
    <form>
      <label htmlFor={`${id}-name`}>Имя:</label>
      <input id={`${id}-name`} type="text" />
      <label htmlFor={`${id}-email`}>Email:</label>
      <input id={`${id}-email`} type="email" />
    </form>
  );
}

• Преимущества: Устойчивость к гидратации, безопасность для SSR, автоматическая уникальность.
• Использование: Для атрибутов id в HTML-элементах, например, в связках <label> и <input>.

2. useSyncExternalStore

Хук useSyncExternalStore позволяет компонентам подписываться на внешние источники данных (например, глобальные состояния, сторонние библиотеки или браузерные API). Он обеспечивает корректную интеграцию с новым конкурентным рендерингом React 18, предотвращая "гонки состояний" и обеспечивая консистентность данных.

import { useSyncExternalStore } from 'react';

// Внешнее хранилище (например, стор Zustand или Redux)
function subscribe(callback) {
  window.addEventListener('online', callback);
  window.addEventListener('offline', callback);
  return () => {
    window.removeEventListener('online', callback);
    window.removeEventListener('offline', callback);
  };
}

function getSnapshot() {
  return navigator.onLine; // Возвращает текущее состояние сети
}

function NetworkStatus() {
  const isOnline = useSyncExternalStore(subscribe, getSnapshot);
  
  return <div>Статус сети: {isOnline ? 'Онлайн' : 'Офлайн'}</div>;
}

• Преимущества: Синхронизация с внешними данными без рисков при конкурентном рендеринге.
• Использование: Для интеграции с библиотеками состояний (Zustand, Redux) или браузерными API (localStorage, WebSockets).

3. useInsertionEffect

Хук useInsertionEffect предназначен для инъекции стилей в DOM, особенно в CSS-in-JS библиотеках (например, styled-components или Emotion). Он запускается до того, как любые DOM-мутации попадут в браузер, что предотвращает визуальные артефакты. Это низкоуровневый хук, похожий на useLayoutEffect, но оптимизированный для стилей.

import { useInsertionEffect } from 'react';

function useCustomStyles(cssRules) {
  useInsertionEffect(() => {
    // Создаём элемент <style> и вставляем CSS
    const style = document.createElement('style');
    style.innerHTML = cssRules;
    document.head.appendChild(style);
    
    return () => {
      // Очистка при размонтировании
      document.head.removeChild(style);
    };
  }, [cssRules]);
}

function StyledComponent() {
  useCustomStyles(`.my-class { color: red; }`);
  
  return <div className="my-class">Текст с кастомными стилями</div>;
}

• Преимущества: Безопасное внедрение стилей без вспышек нестилизованного контента (FOUC).
• Использование: В основном в CSS-in-JS библиотеках, реже в пользовательском коде.

4. useTransition и useDeferredValue

Хотя эти хуки были представлены в React 18 как часть Concurrent Features, они часто упоминаются среди новинок. Они помогают управлять приоритетами рендеринга:

• useTransition: Позволяет помечать обновления состояния как неблокирующие (например, при вводе в поле поиска).
• useDeferredValue: Откладывает обновление значения, чтобы дать приоритет более важным задачам.

import { useState, useTransition, useDeferredValue } from 'react';

function SearchComponent() {
  const [query, setQuery] = useState('');
  const [isPending, startTransition] = useTransition();
  const deferredQuery = useDeferredValue(query); // Отложенное значение
  
  const handleChange = (e) => {
    setQuery(e.target.value); // Срочное обновление
    startTransition(() => {
      // Неблокирующее обновление (например, фильтрация списка)
    });
  };
  
  return (
    <div>
      <input value={query} onChange={handleChange} />
      {isPending && <span>Загрузка...</span>}
      <List searchTerm={deferredQuery} /> {/* Используем отложенное значение */}
    </div>
  );
}

Ключевые улучшения в React 18

• Concurrent Rendering: Фундаментальное обновление, позволяющее React обрабатывать несколько задач одновременно, улучшая отзывчивость.
• Automatic Batching: Автоматическая группировка обновлений состояния для снижения количества ререндеров.
• Strict Mode Enhancements: Строгий режим теперь имитирует двойной рендеринг для обнаружения нестабильных эффектов.

Практические рекомендации

• Используйте useId для SSR-приложений вместо самодельных решений.
• Применяйте useSyncExternalStore для интеграции со сторонними хранилищами.
• useInsertionEffect — узкоспециализированный хук; в большинстве случаев достаточно useEffect или useLayoutEffect.
• Для улучшения UX в сложных интерфейсах освойте useTransition и useDeferredValue.

Эти хуки усиливают React для современных требований: конкурентность, производительность и универсальность (SSR). Они требуют понимания асинхронных процессов, но значительно упрощают создание отзывчивых и стабильных приложений.