> Знаешь ли про React 19 и изменения в компиляторе, убирающие необходимость использования useCallback и useMemo (React)

Короткий ответ

Да, в React 19 появился компилятор (React Compiler, ранее известный как React Forget), который автоматически мемоизирует значения и компоненты на этапе сборки. Это значит, что useCallback, useMemo и React.memo становятся необязательными - компилятор сам определяет, когда нужно пересоздавать функции или объекты, и оборачивает их в мемоизацию без ручного вмешательства разработчика.

Подробное объяснение

React 19 вводит компилятор, который анализирует JavaScript/TypeScript код и автоматически добавляет мемоизацию туда, где это необходимо. Он работает на уровне сборки (build-time), а не runtime, и не требует изменения существующего кода. Компилятор понимает правила React (хуки, чистота компонентов, иммутабельность пропсов) и генерирует оптимизированный код, эквивалентный ручному использованию useMemo, useCallback и React.memo.

Основные изменения:

• Компилятор автоматически оборачивает функции в useCallback, если они передаются как пропсы и могут вызвать лишние ререндеры.
• Он мемоизирует результаты вычислений (аналог useMemo) для дорогих операций.
• Для компонентов он применяет React.memo-подобную логику, предотвращая ререндеры при неизменных пропсах.
• Разработчику больше не нужно думать о зависимостях - компилятор сам отслеживает их.

Важно: компилятор не удаляет существующие useCallback и useMemo - он просто делает их избыточными. Для обратной совместимости старый код продолжает работать. Компилятор опционален и включается через конфигурацию (например, Babel plugin или встроенную поддержку в Next.js).

На практике

На практике это означает, что в React 19 можно писать код без ручной мемоизации, полагаясь на компилятор. Это упрощает код, уменьшает количество ошибок с зависимостями и делает рефакторинг безопаснее. Однако компилятор не панацея: он требует соблюдения правил React (например, не вызывать хуки условно) и может не оптимизировать некоторые паттерны (например, замыкания с мутациями). Для сложных случаев (например, тяжелые вычисления с внешними зависимостями) ручная мемоизация всё ещё может быть полезна.

Пример кода

До React 19:

JSX
function MyComponent({ items, onItemClick }) {
  const sortedItems = useMemo(() => items.sort(), [items]);
  const handleClick = useCallback((id) => {
    onItemClick(id);
  }, [onItemClick]);
  return <List items={sortedItems} onClick={handleClick} />;
}

С React 19:

JSX
function MyComponent({ items, onItemClick }) {
  const sortedItems = items.sort(); // компилятор мемоизирует
  const handleClick = (id) => { onItemClick(id); }; // компилятор мемоизирует
  return <List items={sortedItems} onClick={handleClick} />;
}

Компилятор сам решит, нужно ли мемоизировать sortedItems и handleClick, на основе анализа зависимостей и использования.

Как отвечать на собеседовании

Начни с краткого определения компилятора React 19 и его цели - автоматическая мемоизация. Затем объясни, что он заменяет useCallback, useMemo и React.memo, но не удаляет их. Подчеркни, что это build-time оптимизация, а не runtime. Упомяни, что компилятор опционален и требует соблюдения правил React. Приведи пример кода до и после. Заверши мыслью, что это снижает когнитивную нагрузку на разработчика, но не отменяет понимания мемоизации для сложных случаев.

Что проверяет интервьюер

Интервьюер проверяет:

• Понимание концепции компилятора React 19 и его отличия от runtime-мемоизации.
• Знание, что компилятор работает на уровне сборки, а не в браузере.
• Осознание, что компилятор не делает ручную мемоизацию невозможной, а делает её ненужной.
• Понимание ограничений: компилятор не оптимизирует всё подряд и требует чистоты компонентов.
• Способность объяснить trade-off между автоматической и ручной мемоизацией.

Типичные ошибки

• Утверждение, что компилятор полностью удаляет useCallback и useMemo из кода - он их не удаляет, а делает избыточными.
• Мысль, что компилятор работает в runtime - он работает на этапе сборки.
• Игнорирование того, что компилятор требует соблюдения правил React (например, нельзя вызывать хуки в циклах).
• Переоценка возможностей: компилятор не может оптимизировать код с побочными эффектами или мутациями.
• Забывание, что компилятор опционален и его нужно явно включить.