{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" В этой статье я расскажу о конкурентном режиме в React. Разберёмся, что это: какие есть особенности, какие новые инструменты появились и как с их помощью оптимизировать работу веб-приложений, чтобы у пользователей всё летало. Конкурентный режим — новая фишка в React. Его задача — адаптировать приложение к разным устройствам и скорости сети. Пока что Concurrent Mode — эксперимент, который может быть изменён разработчиками библиотеки, а значит, новых инструментов нет в стейбле. Я вас предупредил, а теперь — поехали.","type":"unstyled","key":"612ln"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сейчас для отрисовки компонентов есть два ограничения: мощность процессора и скорость передачи данных по сети. Когда требуется что-то показать пользователю, текущая версия React пытается отрисовать каждый компонент от начала и до конца. Неважно, что интерфейс может зависнуть на несколько секунд. Такая же история с передачей данных. React будет ждать абсолютно все необходимые компоненту данные, вместо того чтобы рисовать его по частям.","type":"unstyled","key":"7pclo"},{"data":{"image":{"id":"5f2bb4a5b9bbd917b58cd616"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n","type":"atomic:image","key":"3qdg7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Конкурентный режим решает перечисленные проблемы. С ним React может приостанавливать, приоритизировать и даже отменять операции, которые раньше были блокирующими, поэтому в конкурентном режиме можно начинать отрисовывать компоненты независимо от того, были ли получены все данные или только часть.","type":"unstyled","key":"765oo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":39,"offset":0,"style":"BOLD"}],"text":"Concurrent Mode — это Fiber-архитектура","type":"header-two","key":"4mbeu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Конкурентный режим — это не новая штука, которую разработчики внезапно решили добавить, и всё тут же заработало. К его выходу готовились заранее. В 16-й версии движок React переключили на Fiber-архитектуру, которая по принципу работы напоминает планировщик задач в операционной системе. Планировщик распределяет вычислительные ресурсы между процессами. Он способен переключаться в любой момент времени, поэтому у пользователя возникает иллюзия, что процессы работают параллельно.","type":"unstyled","key":"5qh2o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Fiber-архитектура делает то же самое, но с компонентами. Несмотря на то, что она уже есть в React, Fiber-архитектура будто находится в анабиозе и не использует свои возможности по максимуму. Конкурентный режим включит её на полную мощность.","type":"unstyled","key":"5qjgq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При обновлении компонента в обычном режиме приходится целиком рисовать новый кадр на экране. Пока обновление не завершится, пользователь ничего не увидит. В этом случае React работает синхронно. Fiber использует другую концепцию. Каждые 16 мс происходит прерывание и проверка: изменилось ли виртуальное дерево, появились ли новые данные? Если да, пользователь увидит их сразу.","type":"unstyled","key":"bjcq7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Почему 16 мс? Разработчики React стремятся, чтобы перерисовка экрана происходила на скорости, близкой к 60 кадрам в секунду. Чтобы уложить 60 обновлений в 1000 мс, нужно осуществлять их примерно каждые 16 мс. Отсюда и цифра. Конкурентный режим включается «из коробки» и добавляет новые инструменты, которые делают жизнь фронтендера лучше. Расскажу о каждом подробно.","type":"unstyled","key":"dbato"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":0,"style":"BOLD"}],"text":"Suspense","type":"header-two","key":"127d6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Suspense появился в React 16.6 в качестве механизма динамической загрузки компонентов. В конкурентном режиме эта логика сохраняется, но появляются дополнительные возможности. Suspense превращается в механизм, который работает в связке с библиотекой загрузки данных. Мы запрашиваем специальный ресурс через библиотеку и читаем из него данные.","type":"unstyled","key":"33vk1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Suspense в конкурентном режиме читает данные, которые ещё не готовы. Как? Запрашиваем данные, а пока они не пришли целиком, уже начинаем читать их по небольшим кусочкам. Самая крутая фишка для разработчиков — это управление порядком отображения загруженных данных. Suspense позволяет отображать компоненты страницы как одновременно, так и независимо друг от друга. Он делает код понятным: достаточно взглянуть на структуру Suspense, чтобы узнать, в каком порядке запрашиваются данные.","type":"unstyled","key":"5hmde"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Типичное решение для загрузки страниц в «старом» React — Fetch-On-Render. В этом случае мы запрашиваем данные после render внутри useEffect или componentDidMount. Это стандартная логика в случае, когда нет Redux или другого слоя, работающего с данными. Например, мы хотим нарисовать 2 компонента, каждому из которых нужны данные:","type":"unstyled","key":"fkg7d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Запрос компонента 1","type":"unordered-list-item","key":"297s9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ожидание…","type":"unordered-list-item","key":"ep8q4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":19,"style":"BOLD"}],"text":"Получение данных → отрисовка компонента 1","type":"unordered-list-item","key":"dj5q6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Запрос компонента 2","type":"unordered-list-item","key":"7i7da"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ожидание…","type":"unordered-list-item","key":"f845c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":19,"style":"BOLD"}],"text":"Получение данных → отрисовка компонента 2","type":"unordered-list-item","key":"4fh6l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В таком подходе запрос следующего компонента происходит только после отрисовки первого. Это долго и неудобно.","type":"unstyled","key":"clmae"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рассмотрим другой способ, Fetch-Then-Render: сначала запрашиваем все данные, потом отрисовываем страничку.\n","type":"unstyled","key":"61utp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Запрос компонента 1","type":"unordered-list-item","key":"2knqn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Запрос компонента 2","type":"unordered-list-item","key":"17g6g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ожидание…","type":"unordered-list-item","key":"aem9h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Получение компонента 1","type":"unordered-list-item","key":"a2uim"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Получение компонента 2","type":"unordered-list-item","key":"4a252"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"Отрисовка компонентов","type":"unordered-list-item","key":"8hh4o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этом случае мы выносим состояние запроса куда-то наверх — делегируем библиотеке для работы с данными. Способ работает здорово, но есть нюанс. Если один из компонентов грузится гораздо дольше, чем другой, пользователь ничего не увидит, хотя мы могли бы ему уже что-то показать. Рассмотрим пример кода из демки с 2 компонентами: User и Posts. Оборачиваем компоненты в Suspense:","type":"unstyled","key":"17lfh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":29,"style":"ITALIC"}],"text":"const resource = fetchData() // где-то выше в дереве React\nfunction Page({ resource }) {\n return (\n Loading user...}>\n \n Loading posts...}>\n \n \n \n )\n}","type":"unstyled","key":"6tdkj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Может показаться, что такой подход близок к Fetch-On-Render, когда мы запрашивали данные после отрисовки первого компонента. Но на самом деле с использованием Suspense данные придут гораздо быстрее. Всё благодаря тому, что оба запроса отправляются параллельно.","type":"unstyled","key":"809fb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В Suspense можно указать fallback, компонент, который хотим отобразить, и внутрь компонента передать ресурс, реализуемый библиотекой получения данных. Мы используем его as is. Внутри компонентов запрашиваем данные с ресурса и вызываем метод чтения. Это promise, который делает за нас библиотека. Suspense поймёт, загрузились ли данные, и если да — покажет их.","type":"unstyled","key":"echtc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обратите внимание, что компоненты пробуют читать данные, которые ещё находятся в процессе получения:","type":"unstyled","key":"90gnd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":160,"style":"ITALIC"}],"text":"function User() {\n const user = resource.user.read()\n return

{user.name}

\n}\nfunction Posts() {\n const posts = resource.posts.read()\n return // список постов\n}","type":"unstyled","key":"9tgjb"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":11,"offset":76}],"inlineStyleRanges":[],"text":"В текущих демках Дэна Абрамова в качестве заглушки для ресурса используется такая штука.","type":"unstyled","key":"5noci"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"read() {\n if (status === 'pending') {\n throw suspender\n } else if (status === 'error') {\n throw result\n } else if (status === 'success') {\n return result\n }\n}","type":"unstyled","key":"e76uk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если ресурс ещё загружается, мы выбрасываем объект Promise в качестве исключения. Suspense ловит это исключение, понимает, что это Promise, и продолжает грузиться. Если же вместо Promise прилетит исключение с любым другим объектом, станет понятно, что запрос завершился ошибкой. Когда же вернётся готовый результат, Suspense его отобразит. Нам важно получить ресурс и вызвать у него метод. Как это реализовано внутри — решение разработчиков библиотеки, главное, чтобы их реализацию понимал Suspense.","type":"unstyled","key":"ecn04"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда запрашивать данные? Запрашивать наверху дерева — не лучшая идея, потому что они могут никогда не потребоваться. Более подходящий вариант — делать это сразу при переходе внутри обработчиков событий. Например, получить начальное состояние через хук, а дальше делать запрос за ресурсами, как только пользователь нажмёт на кнопку.","type":"unstyled","key":"c8uk9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот как это будет выглядеть в коде:","type":"unstyled","key":"e6s2f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function App() {\n const [resource, setResource] = useState(initialResource)\n return (\n <>\n \n}","type":"unstyled","key":"dd8e4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"useDeferredValue","type":"header-two","key":"a3tpq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итак, есть компонент, с помощью которого мы делаем переходы. Иногда возникает такая ситуация: пользователь хочет уйти на другую страницу, часть данных мы получили и готовы показать. При этом страницы между собой отличаются незначительно. В этом случае было бы логично показывать пользователю устаревшие данные, пока не подгрузится всё остальное.","type":"unstyled","key":"7pj86"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сейчас React так не умеет: в текущей версии на экране пользователя могут отображаться только данные из актуального состояния. Но useDeferredValue в конкурентном режиме умеет возвращать отложенную версию значения, показывать устаревшие данные вместо мигающего лоадера или fallback во время загрузки. Этот хук принимает значение, для которого мы хотим получить отложенную версию, и задержку в миллисекундах.","type":"unstyled","key":"2al9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Интерфейс становится супер текучим. Производить обновления можно с минимальным количеством данных, а всё остальное грузится постепенно. У пользователя создаётся впечатление, что приложение работает быстро и плавно. В действии useDeferredValue выглядит так:","type":"unstyled","key":"big7b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function Page({ resource }) {\n const deferredResource = useDeferredValue(resource, { timeoutMs: 1000 })\n const isDeferred = resource !== deferredResource;\n return (\n Loading user...}>\n \n Loading posts...}>\n \n \n \n )\n}","type":"unstyled","key":"f6h68"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Можно сравнить значение из пропсов с тем, что получено через useDeferredValue. Если они отличаются, значит страница ещё находится в состоянии загрузки.","type":"unstyled","key":"dutdr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Интересно, что useDeferredValue позволит повторить фокус с отложенной загрузкой не только для данных, которые передаются по сети, но и для того, чтобы убрать фриз интерфейса из-за больших вычислений.","type":"unstyled","key":"fdvgt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Почему это здорово? Разные устройства работают по-разному. Если запустить приложение, использующее useDeferredValue, на новом iPhone, переход со страницы на страницу будет моментальным, даже если страницы тяжёлые. Но при использовании debounced задержка появится даже на мощном устройстве. UseDeferredValue и конкурентный режим адаптируются к железу: если оно работает медленно, инпут всё равно будет летать, а сама страничка — обновляться так, как позволяет устройство.","type":"unstyled","key":"b93nd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":41,"offset":0,"style":"BOLD"}],"text":"Как переключить проект в Concurrent Mode?","type":"header-two","key":"bltud"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Конкурентный режим — это именно режим, поэтому его потребуется включить. Как тумблер, который заставляет Fiber работать на полную мощность. С чего же начать?","type":"unstyled","key":"87jvb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Убираем легаси. Избавляемся от всех устаревших методов в коде и убеждаемся, что их нет в библиотеках. Если приложение без проблем работает в React.StrictMode, то всё в порядке — переезд будет простым. Потенциальная сложность — проблемы внутри библиотек. В этом случае нужно либо перейти на новую версию, либо сменить библиотеку. Или же отказаться от конкурентного режима. После избавления от легаси останется только переключить root.","type":"unstyled","key":"2dba2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"С приходом Concurrent Mode будет доступно три режима подключения root:","type":"unstyled","key":"8u5g0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Старый режим\nReactDOM.render(, rootNode)\nРендер после выхода конкурентного режима устареет.","type":"unordered-list-item","key":"8ep9g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":0,"style":"BOLD"}],"text":"Блокирующий режим\nReactDOM.createBlockingRoot(rootNode).render()\nВ качестве промежуточного этапа будет добавлен блокирующий режим, который даёт доступ к части возможностей конкурентного режима на проектах, где есть легаси или другие трудности с переездом.","type":"unordered-list-item","key":"afm4b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"Конкурентный режим\nReactDOM.createRoot(rootNode).render()\nЕсли всё хорошо, нет легаси, и проект можно сразу переключить, замените в проекте рендер на createRoot — и вперёд в светлое будущее.","type":"unordered-list-item","key":"5b0fu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"Выводы","type":"header-two","key":"amnpq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Блокирующие операции внутри React превращаются в асинхронные за счёт переключения на Fiber. Появляются новые инструменты, с которыми легко адаптировать приложение и к возможностям устройства, и к скорости сети:","type":"unstyled","key":"b8qpo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Suspense, благодаря которому можно указывать порядок загрузки данных.","type":"unordered-list-item","key":"8k6lr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"SuspenseList, с которым это ещё удобнее.","type":"unordered-list-item","key":"eho0n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"useTransition для создания плавных переходов между компонентами, обёрнутыми в Suspense.","type":"unordered-list-item","key":"200mi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"useDeferredValue — чтобы показывать устаревшие данные во время операций ввода-вывода и обновления компонентов","type":"unordered-list-item","key":"5tn1b"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":5,"offset":279},{"key":2,"length":10,"offset":392}],"inlineStyleRanges":[],"text":"Попробуйте поэкспериментировать с конкурентным режимом, пока он ещё не вышел. Concurrent Mode позволяет добиться впечатляющих результатов: быстрой и плавной загрузки компонентов в любом удобном порядке, сверхтекучести интерфейса. Подробности описаны в документации, там же лежат демки с примерами, которые стоит поизучать самостоятельно. А если вам любопытно, как работает Fiber-архитектура, вот ссылка на интересный доклад.","type":"unstyled","key":"172ti"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Оцените свои проекты — что можно улучшить, используя новые инструменты? А когда конкурентный режим выйдет, смело переезжайте. Всё будет супер! ","type":"unstyled","key":"ckm91"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"SVlYhzRF0qCixsuWVDwr"}],"entityMap":{"0":{"data":{"href":"https://codesandbox.io/s/frosty-hermann-bztrp?file=/src/fakeApi.js","url":"https://codesandbox.io/s/frosty-hermann-bztrp?file=/src/fakeApi.js"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://ru.reactjs.org/docs/concurrent-mode-intro.html","url":"https://ru.reactjs.org/docs/concurrent-mode-intro.html"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://www.youtube.com/watch?v=4p9ISqIx1zI","url":"https://www.youtube.com/watch?v=4p9ISqIx1zI"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}