Почему 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 предоставляют мощные инструменты для управления производительностью и отзывчивостью приложений. Они позволяют разработчикам более тонко управлять приоритетами задач, оптимизируя взаимодействие пользователя с приложением даже при высоких нагрузках. Внедрение этих методик в процесс разработки может способствовать созданию более плавных и приятных для пользователя приложений.

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

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

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

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

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

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

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

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

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

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

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

Заключение

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