Что нового в React 19?

#Почему React?

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

#Новвоведения в React 19

В React 19 было представлено несколько новых функций и улучшений, включая автоматическую группировку (batching), серверные компоненты, конкурентные функции и различные оптимизации для улучшения как разработки, так и пользовательского опыта.

Вот краткое изложение ключевых обновлений:

#Автоматическая Группировка (Batching)

React 19 расширяет автоматическую группировку на больше сценариев, включая промисы, обработчики нативных событий и временной интервал с requestIdleCallback. Это приводит к меньшему количеству повторных рендеров и улучшению производительности для приложений React.

Для демонстрации эффекта автоматической группировки в React 19 и сравнения его с предыдущим поведением, рассмотрим пример, когда мы обновляем состояние в ответ на клик пользователя. В более ранних версиях React, без явного использования ReactDOM.unstable_batchedUpdates (для событий, не связанных с React, например, в асинхронных операциях), обновления состояния могли приводить к нескольким перерендерам.

#Как было раньше

function MyComponent() {
	const [count, setCount] = useState(0);
	const [flag, setFlag] = useState(false);

	function handleClick() {
		// Представим, что это вызовы setState происходят в результате асинхронной операции
		// или в обработчике событий, не управляемом React (например, внешний WebSocket).
		setCount((c) => c + 1);
		setFlag((f) => !f);
		// В более старых версиях React, каждый вызов setState приводил бы к отдельному рендеру,
		// если не использовать unstable_batchedUpdates для явной группировки.
	}

	return (
		<div>
			<p>Счётчик: {count}</p>
			<p>Флаг: {flag.toString()}</p>
			<button onClick={handleClick}>Обновить</button>
		</div>
	);
}

В этом примере, без автоматической группировки, каждое обновление состояния (setCount и setFlag) могло приводить к отдельному рендеру в более старых версиях React. Это могло негативно сказаться на производительности, особенно в компонентах с большим количеством обновлений состояния.

#С Автоматической Группировкой в React 19

В React 19 автоматическая группировка обновлений состояния расширена и на асинхронные операции, так что пример выше будет работать более эффективно “из коробки”:

// Код не поменяется, тот же самый код будет работать, но React 19 автоматически оптимизирует и группирует обновления,
// сокращая количество рендеров до одного.

Это значит, что в React 19, оба вызова setState в функции handleClick будут автоматически сгруппированы в один перерендер, независимо от того, происходят ли они в результате асинхронной операции или в обработчиках событий, не управляемых React. Это улучшение значительно облегчает разработку, снижая необходимость в ручном управлении группировками обновлений и способствуя более высокой производительности приложения.

#Серверные Компоненты

React 19 улучшает поддержку серверных компонентов, позволяя разработчикам создавать компоненты, которые рендерятся исключительно на сервере. Это сокращает размер JavaScript-бандла, отправляемого клиенту, улучшая время загрузки и производительность. Серверные компоненты могут беспрепятственно интегрироваться с клиентскими компонентами, позволяя разработчикам создавать более эффективные и динамичные приложения.

#Конкурентные Функции

Конкурентные функции в React — это набор возможностей, введённых для улучшения производительности и отзывчивости приложений за счёт более эффективного управления приоритетами обновлений и рендеринга.

Эти функции позволяют React лучше использовать ресурсы браузера, выполняя работу в фоновом режиме, откладывая менее важные задачи и сосредотачиваясь на критически важных для пользователя действиях. Это позволяет приложениям оставаться отзывчивыми даже при выполнении тяжёлых вычислений или загрузке данных.

#Примеры Использования

React позволяет использовать API, такие как startTransition, для указания задач, которые могут быть отложены без ущерба для восприятия пользователем отзывчивости интерфейса. Например:

import { startTransition } from 'react';

function MyComponent() {
	const [input, setInput] = useState('');
	const [filteredData, setFilteredData] = useState([]);

	function handleChange(e) {
		const nextInput = e.target.value;
		setInput(nextInput);

		// Эта задача может быть выполнена асинхронно без блокировки основного потока,
		// улучшая восприятие отзывчивости приложения.
		startTransition(() => {
			const nextFilteredData = expensiveFilterOperation(nextInput);
			setFilteredData(nextFilteredData);
		});
	}

	return (
		<div>
			<input value={input} onChange={handleChange} />
			{/* Отображение отфильтрованных данных */}
		</div>
	);
}

#Конкурентные функции в React - круто?

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

#Оптимизации и Исправления Ошибок

React 19 включает различные оптимизации и исправления ошибок, направленные на улучшение опыта разработчиков и стабильности приложений.

Это включает улучшения в React DevTools, лучшую обработку ошибок и обновления в алгоритме согласования, чтобы сделать его более эффективным.

#Улучшения Suspense и Ленивой Загрузки (lazy loading)

Релиз приносит улучшения для Suspense и ленивой загрузки (на англ. lazy loading), упрощая разделение кода (на англ. code splitting) и ленивую загрузку компонентов.

Это может значительно улучшить время начальной загрузки приложений, уменьшая количество кода, необходимого во время начальной загрузки.

#Улучшенный Опыт Разработчиков

С обновлениями сообщений об ошибках, предупреждений и React DevTools, разработчики могут ожидать улучшенного опыта разработки.

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

#Документация

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

#Заключение

Улучшения в React 19 предназначены для того, чтобы сделать React приложения более эффективными, проще в разработке и более производительными, чем раньше. Фокус на автоматической группировке, серверных компонентах, конкурентных функциях и оптимизациях отражает стремление React улучшить как опыт разработки, так и пользовательский опыт, что очень круто.