// Уявіть функцію fetchUserData, що повертає Promise
function fetchUserData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ name: 'Alice' });
    }, 2000);
  });
}

// Гіпотетичний хук для завантаження даних, що підтримує Suspense
function useUserData() {
  const data = fetch(url);
  if (data.status === 'pending') {
    throw new Promise(resolve => {
      // Це те, що перехоплює Suspense
      setTimeout(() => resolve(null), 2000); 
    });
  }
  return data.value;
}

function UserProfile() {
  const userData = useUserData(); // Цей виклик може призупинити рендеринг
  return 
Ласкаво просимо, {userData.name}!
;
}

function App() {
  return (
    Завантаження користувача...

2. Автоматичне пакетування (батчинг)

Пакетування — це процес групування кількох оновлень стану в один повторний рендеринг. Традиційно React пакетував лише оновлення, що відбувалися всередині обробників подій. Оновлення, ініційовані поза обробниками подій (наприклад, усередині промісів або `setTimeout`), не пакетувалися, що призводило до зайвих повторних рендерингів.

Як це працює з паралелізмом: У паралельному режимі React автоматично пакетує всі оновлення стану, незалежно від того, де вони виникають. Це означає, що якщо у вас є кілька оновлень стану, що відбуваються одне за одним (наприклад, від завершення кількох асинхронних операцій), React згрупує їх і виконає один повторний рендеринг, покращуючи продуктивність і зменшуючи накладні витрати від кількох циклів рендерингу.

Приклад: Припустимо, ви завантажуєте дані з двох різних API. Після завершення обох запитів ви оновлюєте дві окремі частини стану. У старих версіях React це могло б викликати два повторних рендеринги. У паралельному режимі ці оновлення пакетуються, що призводить до одного, більш ефективного повторного рендерингу.

3. Переходи (Transitions)

Переходи — це нова концепція, введена для розрізнення термінових та нетермінових оновлень. Це основний механізм для забезпечення переривчастого рендерингу.

Термінові оновлення: Це оновлення, які вимагають негайного зворотного зв'язку, такі як введення тексту в поле введення, натискання кнопки або пряме маніпулювання елементами UI. Вони повинні відчуватися миттєвими.

Перехідні оновлення: Це оновлення, які можуть зайняти більше часу і не вимагають негайного зворотного зв'язку. Приклади включають рендеринг нової сторінки після натискання посилання, фільтрацію великого списку або оновлення пов'язаних елементів UI, які не реагують безпосередньо на клік. Ці оновлення можуть бути перервані.

Як це працює з паралелізмом: Використовуючи API `startTransition`, ви можете позначати певні оновлення стану як переходи. Планувальник React тоді розглядатиме ці оновлення з нижчим пріоритетом і може перервати їх, якщо відбудеться більш термінове оновлення. Це гарантує, що поки триває нетермінове оновлення (наприклад, рендеринг великого списку), термінові оновлення (наприклад, введення тексту в рядок пошуку) мають пріоритет, зберігаючи чутливість UI.

Глобальний приклад: Розглянемо веб-сайт для бронювання подорожей. Коли користувач обирає новий напрямок, це може викликати каскад оновлень: завантаження даних про рейси, оновлення доступності готелів та рендеринг карти. Якщо користувач негайно вирішує змінити дати подорожі, поки початкові оновлення ще обробляються, API `startTransition` дозволяє React призупинити оновлення рейсів/готелів, обробити термінову зміну дати, а потім, можливо, відновити або перезапустити завантаження даних про рейси/готелі на основі нових дат. Це запобігає зависанню UI під час складної послідовності оновлень.

Приклад коду (ілюстративний):

import { useState, useTransition } from 'react';

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

  const handleQueryChange = (e) => {
    const newQuery = e.target.value;
    setQuery(newQuery);

    // Позначаємо це оновлення як перехід
    startTransition(() => {
      // Симулюємо завантаження результатів, це можна перервати
      fetchResults(newQuery).then(res => setResults(res));
    });
  };

  return (
    

      
      {isPending && 
Завантаження результатів...
}
      

        {results.map(item => (
          
{item.name}
        ))}
      
    
  );
}

4. Бібліотеки та інтеграція з екосистемою

Переваги паралельного режиму не обмежуються основними функціями React. Вся екосистема адаптується. Бібліотеки, що взаємодіють з React, такі як рішення для маршрутизації або інструменти управління станом, також можуть використовувати паралелізм для забезпечення більш плавного досвіду.

Приклад: Бібліотека маршрутизації може використовувати переходи для навігації між сторінками. Якщо користувач переходить на іншу сторінку до того, як поточна сторінка повністю відрендерилася, оновлення маршрутизації може бути плавно перервано або скасовано, і нова навігація отримає пріоритет. Це гарантує, що користувач завжди бачить найактуальніший вигляд, який він мав намір побачити.

Як увімкнути та використовувати паралельні функції

Хоча паралельний режим є фундаментальною зміною, увімкнення його функцій, як правило, є простим і часто вимагає мінімальних змін у коді, особливо для нових додатків або при впровадженні таких функцій, як Suspense та Transitions.

1. Версія React

Паралельні функції доступні в React 18 і новіших версіях. Переконайтеся, що ви використовуєте сумісну версію:

npm install react@latest react-dom@latest

2. Root API (`createRoot`)

Основний спосіб активувати паралельні функції — це використання нового API `createRoot` при монтуванні вашого додатка:

// index.js або main.jsx
import ReactDOM from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render();

Використання `createRoot` автоматично вмикає всі паралельні функції, включаючи автоматичне пакетування, переходи та Suspense.

Примітка: Старий API `ReactDOM.render` не підтримує паралельні функції. Перехід на `createRoot` є ключовим кроком для розблокування паралелізму.

3. Впровадження Suspense

Як було показано раніше, Suspense впроваджується шляхом обгортання компонентів, що виконують асинхронні операції, межею <Suspense> та наданням пропсу fallback.

Найкращі практики:

• Вкладайте межі <Suspense> для гранулярного управління станами завантаження.
• Використовуйте кастомні хуки, які інтегруються з Suspense, для чистішої логіки завантаження даних.
• Розгляньте можливість використання бібліотек, таких як Relay або Apollo Client, які мають першокласну підтримку Suspense.

4. Використання переходів (`startTransition`)

Визначте нетермінові оновлення UI та обгорніть їх у startTransition.

Коли використовувати:

• Оновлення результатів пошуку після введення тексту користувачем.
• Навігація між маршрутами.
• Фільтрація великих списків або таблиць.
• Завантаження додаткових даних, які не впливають безпосередньо на взаємодію з користувачем.

Приклад: Для складної фільтрації великого набору даних, що відображається в таблиці, ви б встановили стан запиту фільтра, а потім викликали startTransition для фактичної фільтрації та повторного рендерингу рядків таблиці. Це гарантує, що якщо користувач швидко змінить критерії фільтрації знову, попередня операція фільтрації може бути безпечно перервана.

Переваги переривчастого рендерингу для глобальних аудиторій

Переваги переривчастого рендерингу та паралельного режиму посилюються при розгляді глобальної бази користувачів з різноманітними умовами мережі та можливостями пристроїв.

• Покращена сприймана продуктивність: Навіть на повільніших з'єднаннях або менш потужних пристроях UI залишається чутливим. Користувачі відчувають, що додаток працює швидше, оскільки критичні взаємодії ніколи не блокуються надовго.
• Покращена доступність: Завдяки пріоритезації взаємодій з користувачем, додатки стають більш доступними для користувачів, які покладаються на допоміжні технології або можуть мати когнітивні порушення, для яких корисний послідовно чутливий інтерфейс.
• Зменшення розчарування: Глобальні користувачі, які часто працюють у різних часових поясах та з різними технічними налаштуваннями, цінують додатки, які не зависають і не гальмують. Плавний UX веде до вищого залучення та задоволення.
• Краще управління ресурсами: На мобільних пристроях або старому обладнанні, де процесор та пам'ять часто обмежені, переривчастий рендеринг дозволяє React ефективно управляти ресурсами, призупиняючи несуттєві завдання, щоб звільнити місце для критичних.
• Послідовний досвід на різних пристроях: Незалежно від того, чи користувач на висококласному настільному комп'ютері в Кремнієвій долині, чи на бюджетному смартфоні в Південно-Східній Азії, основна чутливість додатка може бути збережена, долаючи розрив у можливостях обладнання та мережі.

Розглянемо додаток для вивчення мов, який використовують студенти по всьому світу. Якщо один студент завантажує новий урок (потенційно довге завдання), а інший намагається відповісти на швидке питання зі словника, переривчастий рендеринг гарантує, що відповідь на питання буде миттєвою, навіть якщо завантаження триває. Це надзвичайно важливо для освітніх інструментів, де негайний зворотний зв'язок є життєво важливим для навчання.

Потенційні виклики та міркування

Хоча паралельний режим пропонує значні переваги, його впровадження також пов'язане з кривою навчання та деякими міркуваннями:

• Налагодження (Debugging): Налагодження асинхронних та переривчастих операцій може бути складнішим, ніж налагодження синхронного коду. Розуміння потоку виконання та того, коли завдання можуть бути призупинені або відновлені, вимагає уважності.
• Зміна ментальної моделі: Розробникам потрібно змінити своє мислення з суто послідовної моделі виконання на більш паралельний, керований подіями підхід. Розуміння наслідків startTransition та Suspense є ключовим.
• Зовнішні бібліотеки: Не всі сторонні бібліотеки оновлені для роботи з паралелізмом. Використання старих бібліотек, що виконують блокуючі операції, все ще може призводити до зависання UI. Важливо переконатися, що ваші залежності сумісні.
• Управління станом: Хоча вбудовані паралельні функції React є потужними, складні сценарії управління станом можуть вимагати ретельного розгляду, щоб гарантувати, що всі оновлення обробляються коректно та ефективно в рамках паралельної парадигми.

Майбутнє паралелізму в React

Шлях React до паралелізму триває. Команда продовжує вдосконалювати планувальник, впроваджувати нові API та покращувати досвід розробників. Такі функції, як Offscreen API (що дозволяє рендерити компоненти без впливу на видимий для користувача UI, що корисно для попереднього рендерингу або фонових завдань), ще більше розширюють можливості, яких можна досягти за допомогою паралельного рендерингу.

Оскільки веб стає все складнішим, а очікування користувачів щодо продуктивності та чутливості продовжують зростати, паралельний рендеринг стає не просто оптимізацією, а необхідністю для створення сучасних, захоплюючих додатків, що задовольняють глобальну аудиторію.

Висновок

Паралельний режим React та його основна концепція переривчастого рендерингу є значною еволюцією в тому, як ми створюємо користувацькі інтерфейси. Дозволяючи React призупиняти, відновлювати та пріоритезувати завдання рендерингу, ми можемо створювати додатки, які є не тільки продуктивними, але й неймовірно чутливими та стійкими, навіть під великим навантаженням або в обмежених середовищах.

Для глобальної аудиторії це означає більш справедливий та приємний користувацький досвід. Незалежно від того, чи ваші користувачі отримують доступ до вашого додатка через високошвидкісне оптоволоконне з'єднання в Європі чи стільникову мережу в країні, що розвивається, паралельний режим допомагає гарантувати, що ваш додаток відчувається швидким і плавним.

Впровадження таких функцій, як Suspense та Transitions, та перехід на новий Root API є вирішальними кроками до розкриття повного потенціалу React. Розуміючи та застосовуючи ці концепції, ви можете створювати веб-додатки нового покоління, які справді радують користувачів у всьому світі.

Ключові висновки:

• Паралельний режим React дозволяє переривчастий рендеринг, звільняючись від синхронного блокування.
• Функції, такі як Suspense, автоматичне пакетування та Transitions, побудовані на цій паралельній основі.
• Використовуйте createRoot для увімкнення паралельних функцій.
• Визначайте та позначайте нетермінові оновлення за допомогою startTransition.
• Паралельний рендеринг значно покращує UX для глобальних користувачів, особливо при різних умовах мережі та на різних пристроях.
• Слідкуйте за розвитком паралельних функцій React для оптимальної продуктивності.

Почніть досліджувати паралельний режим у своїх проектах вже сьогодні та створюйте швидші, більш чутливі та приємніші додатки для всіх.