Чем React 18 и React 19 отличаются с точки зрения concurrent rendering?

Что такое concurrent rendering

Concurrent rendering — это способность React прерывать, приостанавливать и возобновлять рендеринг, чтобы поддерживать отзывчивость интерфейса. Вместо синхронного блокирующего обновления React может разбивать работу на части и переключаться между задачами.

React 18: opt-in подход

В React 18 concurrent rendering был доступен только через специальные API, такие как useTransition, useDeferredValue и Suspense. Обычные обновления (например, setState) оставались синхронными и блокирующими. Разработчик должен был явно указать, какие обновления считать «переходными».

import { useTransition } from 'react';

function Search() {
  const [isPending, startTransition] = useTransition();
  const [query, setQuery] = useState('');

  const handleChange = (e) => {
    startTransition(() => {
      setQuery(e.target.value); // низкий приоритет
    });
  };

  return ;
}

React 19: concurrent по умолчанию

В React 19 concurrent rendering становится поведением по умолчанию для всех обновлений. React автоматически определяет приоритеты и может прерывать рендеринг без явных указаний. Это упрощает код и улучшает производительность «из коробки».

Кроме того, React 19 добавляет новые хуки, такие как useOptimistic и useActionState, которые используют concurrent возможности для оптимистичных обновлений и работы с формами.

import { useOptimistic } from 'react';

function TodoList({ todos, addTodo }) {
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    todos,
    (state, newTodo) => [...state, { text: newTodo, pending: true }]
  );

  const formAction = async (formData) => {
    addOptimisticTodo(formData.get('todo'));
    await addTodo(formData.get('todo'));
  };

  return (
    
      
      Add
      {optimisticTodos.map(t => {t.text})}
    
  );
}

Ключевые различия

• React 18: concurrent rendering — opt-in, требует явного использования API.
• React 19: concurrent rendering — поведение по умолчанию, автоматическое управление приоритетами.
• React 19 добавляет новые хуки для оптимистичных обновлений и форм, использующие concurrent возможности.
• В React 19 улучшена автоматическая батчинг обновлений, включая асинхронные операции.

Итог: React 19 делает concurrent rendering более доступным и мощным, снижая необходимость ручной оптимизации. Если вы используете React 18, стоит рассмотреть переход на 19 для автоматического улучшения производительности и упрощения кода.