что нового в react 18
React 18: что нужно знать о новой версии
В начале лета в официальном блоге React вышла новость о планах на 18 версию библиотеки. Команда разработчиков рассказала о новых фичах и API, которые планируется зарелизить в обновлении. Меня зовут Ильмир Шайхутдинов, я frontend разработчик Технократии, и в этой статье я хочу пробежаться по изменениям и познакомить вас с ними поближе.
Содержание
Публичная рабочая группа
Процесс создания обновления сделали публичным. За прогрессом рабочей группы можно следить на платформе Github Discussions. Посмотреть обсуждения может каждый, но доступ к комментированию и созданию новых тем есть только у команды React и активных участников сообщества (преподаватели, разработчики и авторы библиотек). Благодаря этому появилась возможность заглянуть за кулисы разработки и раньше релиза ознакомиться с изменениями в React 18. Перейдем к ним.
Автоматический батчинг
React 18 добавляет возможность автоматического батчинга обновления состояний для асинхронных операций: promise, таймауты, fetch запросы. Батчингом в React называют процесс группировки нескольких вызовов обновления состояния в один этап ререндера. Это положительно сказывается на производительности.
До React 18 батчинг также существовал, но автоматически работал только для обработчиков DOM событий:
В React 18 все обновления состояния внутри Promise, таймаутов, fetch-запросов будут батчиться также, как для обработчиков DOM-событий. Код ниже:
Как отменить батчинг?
Обычно батчинг безопасен и не вызывает проблем при разработке, но если сразу после обновления состояния нужно прочитать изменения в DOM, то можно использовать ReactDOM.flushSync() для отмены батчинга:
Более подробно про автоматический батчинг в теме на Github.
Strict mode
Следующей фичей React 18 станет улучшение режима Strict Mode. В него добавится новый режим под названием “strict effects”. Чтобы понять, что это за режим, вспомним, как Strict Mode работал до обновления.
Компоненты, обернутые в (только в dev режиме), умышленно рендерятся по два раза, чтобы избежать нежелательных сайд-эффектов, которые можно добавить в процессе разработки.
Offscreen API
Она улучшает производительность таких компонентов как виртуальный скролл, табы, а также внедряет поддержку браузерного API — content-visibility.
Чтобы понять принцип работы Offscreen API, рассмотрим пример. У вас есть компонент, рендер которого происходит по определенному условию. Например, текущий таб. У данного компонента есть внутреннее состояние, и если мы сменим таб, то оно пропадет вместе с размонтированием (unmount) данного компонента.
Основная цель Offscreen API — возможность сохранять внутреннее состояние компонента, скрывая его, а не размонтируя. Для этого React вызывает методы жизненного цикла, например, unmount, но вместе с этим сохраняет внутреннее состояние компонента и его DOM элементы. Таким образом, в процессе жизни компонента событие “mount” и “unmount” могут вызываться несколько раз.
Более подробно про “strict effects” и Offscreen API в теме на Github.
Root API
Идем дальше. В обновлении нас ждут новый Root API и старый (legacy) Root API. Команда React специально оставила старый Root API, чтобы пользователи, которые обновили версию, могли постепенно перейти на новую, сравнивая при этом ее работу со старой. Использование старого Root API будет сопровождаться предупреждением в консоли о необходимости переключения на новый. Рассмотрим пример с новым Root API и увидим разницу с текущей реализацией:
Теперь отдельно создается “корень” — указатель верхнеуровневой структуры данных, которую React использует для отслеживания дерева для рендеринга. В предыдущих версиях React “корень” был недоступен для пользователя, React прикреплял его к DOM-узлу и никуда не возвращал. В новом Root API изменился метод гидратации контейнера. Теперь вместо hydrate нужно писать hydrateRoot:
Обратите внимание на порядок аргументов в hydrateRoot(): он принимает JSX вторым аргументом. Это сделано из-за того, что первый рендер клиента является особенным и требует соответствия с серверным деревом.
Если надо обновить “корень” приложения после гидратации, можно сохранить его в переменную и вызывать render():
Более подробно про Root API в теме на Github.
Конкурентный рендеринг
Конкурентный режим внедряется постепенно. Команда разработки дала пользователям возможность частичного использования конкурентных фич. Таким образом, можно обновиться до React 18 и практически ничего не изменять в коде приложения — все будет работать. React 18 поддерживает плавное обновление кодовой базы приложения.
На всякий случай определим, что такое конкурентный режим. Он предназначен для более плавной работы приложения на устройстве пользователя. Одна из областей, где данная фича применяется, это прерываемый рендеринг. Представьте, что пользователь вводит в строку поиска текст. Это событие обновляет состояние компонента, и происходит рендер нового списка результатов. Во время этого процесса залипает ввод: браузер не может обновить введенный в поле текст, так как занимается рендером нового списка результатов. Конкурентный режим исправляет это ограничение, делая рендер прерываемым.
Новые API
С новыми фичами конкурентного рендеринга были добавлены и новые API. Они относятся к переходам состояний (state transition), фичам задержки (Suspense) и новым хукам.
startTransition
Это API добавлено для обновления состояния компонента, которое влечет за собой тяжелые вычисления, такие как фильтрация списка. Оно позволяет значительно улучшить пользовательский ввод и отклик интерфейса, помечая тяжелые обновления компонента как “переходы” (transitions).
API представлено в виде функции startTransition, в которую помещают обновление состояний, являющихся несрочными (non-urgent).
Обновления, обернутые в startTransition, помечаются несрочными и могут прерываться, если появятся более срочные обновления, спровоцированные пользовательским вводом. Если переход прервется пользователем, например, при вводе нескольких символов в строке, React отбросит незавершенную работу по рендерингу и отобразит только последнее обновление.
startTransition полезен, если вы хотите, чтобы пользовательский ввод был быстрым, не было фриза UI, а несрочные операции выполнялись на фоне. Помимо startTransition, появился новый хук useTransition. Он позволяет узнать статус перехода:
Если переход не завершен, то значение isPending будет равно true, поэтому можно отображать на UI спиннер, пока пользователь ждет:
Более подробно про startTransition в теме на Github.
useDeferredValue
Данный хук вернет отложенную версию переданного значения, которая будет “отставать” от исходной на время, равное таймауту:
Этот хук поможет в ситуациях, в которых нужно реализовать сложное отложенное поведение, завязанное на состояниях.
Улучшения Suspense
Suspense предназначен для отображения запасного интерфейса (спиннера) во время ожидания дочерних компонентов. Дочерние компоненты в это время могут выполнять асинхронные вызовы API либо загружаться через lazy load.
Основное нововведение в том, что фича стала стабильной, получила большие архитектурные изменения под капотом и приобрела название “Конкурентные задержки” (Concurrent Suspense). Смена названия никак не отразится на пользователях. Существенное изменение для пользователей заключается в рендере дочерних элементов внутри Suspense:
В React 17 компонент будет смонтирован и вызваны его эффекты, затем он будет скрыт.
В React 18 это поведение исправлено: теперь компонент смонтируется только после того, как загрузится.
Более подробно про изменения Suspense в теме на Github.
SuspenseList
Предназначен для определения порядка, в котором загружаются и отображаются пользователю напрямую вложенные компоненты Suspense и SuspenseList.
Бывают случаи, когда на UI необходимо отобразить компоненты в определенном порядке, и если обернуть их в SuspenseList, то React не отобразит компонент, пока не загрузится предыдущий из списка (этим поведением можно управлять).
Более подробно, с описанием пропсов, в статье на сайте React.
Потоковый SSR
Были также внесены большие улучшения в Suspense Server-Side-Rendering (SSR). Рассмотрим основные фичи:
Выборочная гидратация.
React начнет гидратацию компонентов с учетом взаимодействия пользователя с содержимым сайта. Например, при клике на комментарий React приоритезирует гидратацию HTML родительских блоков:
Еще одна особенность в том, что React не будет блокировать UI во время гидратации — этот процесс будет происходить во время простоя браузера, поэтому пользовательские события будут обрабатываться сразу.
Потоковая отправка HTML
Позволяет отправить HTML клиенту без загрузки всех данных для рендера на сервер. А как только данные будут получены, они отрендерятся на сервере и отправятся на клиент. Например, есть блок с комментариями, и мы можем асинхронно загружать по ним информацию, отдавая HTML. А когда комментарии будут получены, отрендерить их и отправить клиенту в конце HTML документа. Выглядеть это будет примерно так:
Более подробно про потоковый SSR в теме на Github.
В этом разделе была описана лишь малая часть примеров работы с API конкурентного рендеринга. На сайте React написана статья с более подробными примерами и описаниями паттернов использования конкурентного рендеринга.
Дорожная карта
Уже сейчас можно протестировать новые изменения, установив версию под тегом @alpha, но будьте готовы к багам.
По информации из релизного плана, публичная бета версия и RC ожидаются в течение ближайших нескольких месяцев, а спустя 2-4 недели после RC выйдет стабильная версия React 18.
Таким образом, React 18 можно ожидать либо к концу 2021 года, либо в первой половине 2022 года.
Также подписывайтесь на наш телеграм-канал «Голос Технократии». Каждое утро мы публикуем новостной дайджест из мира ИТ, а по вечерам делимся интересными и полезными мастридами.
The Plan for React 18
React 18 is now in beta. More information about the status of the release is available in the React 18 Working Group post.
The React team is excited to share a few updates:
These updates are primarily aimed at maintainers of third-party libraries. If you’re learning, teaching, or using React to build user-facing applications, you can safely ignore this post. But you are welcome to follow the discussions in the React 18 Working Group if you’re curious!
What’s coming in React 18
These features are possible thanks to a new opt-in mechanism we’re adding in React 18. It’s called “concurrent rendering” and it lets React prepare multiple versions of the UI at the same time. This change is mostly behind-the-scenes, but it unlocks new possibilities to improve both real and perceived performance of your app.
If you’ve been following our research into the future of React (we don’t expect you to!), you might have heard of something called “concurrent mode” or that it might break your app. In response to this feedback from the community, we’ve redesigned the upgrade strategy for gradual adoption. Instead of an all-or-nothing “mode”, concurrent rendering will only be enabled for updates triggered by one of the new features. In practice, this means you will be able to adopt React 18 without rewrites and try the new features at your own pace.
A gradual adoption strategy
Since concurrency in React 18 is opt-in, there are no significant out-of-the-box breaking changes to component behavior. You can upgrade to React 18 with minimal or no changes to your application code, with a level of effort comparable to a typical major React release. Based on our experience converting several apps to React 18, we expect that many users will be able to upgrade within a single afternoon.
We successfully shipped concurrent features to tens of thousands of components at Facebook, and in our experience, we’ve found that most React components “just work” without additional changes. We’re committed to making sure this is a smooth upgrade for the entire community, so today we’re announcing the React 18 Working Group.
Working with the community
We’re trying something new for this release: We’ve invited a panel of experts, developers, library authors, and educators from across the React community to participate in our React 18 Working Group to provide feedback, ask questions, and collaborate on the release. We couldn’t invite everyone we wanted to this initial, small group, but if this experiment works out, we hope there will be more in the future!
The goal of the React 18 Working Group is to prepare the ecosystem for a smooth, gradual adoption of React 18 by existing applications and libraries. The Working Group is hosted on GitHub Discussions and is available for the public to read. Members of the working group can leave feedback, ask questions, and share ideas. The core team will also use the discussions repo to share our research findings. As the stable release gets closer, any important information will also be posted on this blog.
For more information on upgrading to React 18, or additional resources about the release, see the React 18 announcement post.
Accessing the React 18 Working Group
Everyone can read the discussions in the React 18 Working Group repo.
Because we expect an initial surge of interest in the Working Group, only invited members will be allowed to create or comment on threads. However, the threads are fully visible to the public, so everyone has access to the same information. We believe this is a good compromise between creating a productive environment for working group members, while maintaining transparency with the wider community.
As always, you can submit bug reports, questions, and general feedback to our issue tracker.
How to try React 18 Alpha today
New alphas are regularly published to npm using the @alpha tag. These releases are built using the most recent commit to our main repo. When a feature or bugfix is merged, it will appear in an alpha the following weekday.
There may be significant behavioral or API changes between alpha releases. Please remember that alpha releases are not recommended for user-facing, production applications.
Projected React 18 release timeline
We don’t have a specific release date scheduled, but we expect it will take several months of feedback and iteration before React 18 is ready for most production applications.
More details about our projected release timeline are available in the Working Group. We’ll post updates on this blog when we’re closer to a public release.
Обзор будущей версии React 18
Transition API
Функции в startTransition выполняются синхронно. Любые обновления внутри них помечаются как «переходы». Чуть позже, при обработке обновлений, React будет использовать эту информацию, решая, как и когда оптимальнее отрендерить изменения. То есть, «размышления» javascript’а о рендеринге обновления начнутся чуть раньше, чем при использовании setTimeout.
Также React позаботился за нас об информировании пользователей о том, что в фоновом режиме выполняется работа. С помощью хука useTransition() мы можем получить переменную-флаг isPending. А дальше, например, делаем условный рендеринг лоудера в зависимости от булевого значения переменной.
Suspense API
Загрузка страницы работает по такой цепочке: сначала происходит выборка данных (на сервере), затем создание HTML (на сервере), отправка его в браузер и гидратация (то есть, навешивание на готовый HTML обработчиков событий). Эти этапы идут последовательно друг за другом. Главный недостаток в том, что эта цепочка работает в контексте всего приложения сразу. То есть, мы должны ждать, пока сформируется весь HTML на сервере, а затем гидратируется за один проход в браузере. Suspense API призван решить эту проблему.
Теперь мы можем оборачивать части приложения в компонент, и вышеуказанная цепочка событий для каждого обернутого компонента станет независимой. То есть, можно полноценно взаимодействовать с некоторыми частями приложения до того, как загрузятся другие.
Улучшенный batching
Тем не менее, в нынешней версии React механизм пакетирования несовершенен. Обновления пакетируются лишь в обработчиках событий React. Каждое же изменение стейта в промисах или в setTimeout будет генерировать перерендер.
В этой статье мы не стали рассматривать все изменения, выбрали лишь самые интересные на наш взгляд. В любом случае, к моменту официального релиза стабильной версии многое может измениться. Тем не менее, основные направления улучшений можно проследить. А это значит, можно составить представление о тенденциях развития React на ближайшее время.
Сегодня мы поговорим о новой версии React. А именно «React 18». Расскажем о нововвидениях и фичах!
Одним из первых нововведений является «Create Root», который слегка изменяет структуру рендера в коде.
Далее идёт «Hydrate». Он стал минималистичнее, что упрощает создание гидрейта.
После этого идёт изменение Пакетной обработки, который упрощает процесс, и теперь всё выполняется одним рендером. Теперь не будет никаких проблем
Улучшение поддержки SSR также облегчает, и улучшает процесс загрузки серверной части.
Язык разметки HTML
Закругление углов CSS
Ecmascript 6
Инструкция для вступления в нашу команду
Рады видеть вас на этой странице сайта, это означает что вы хотите влиться и стать частью нашей дружной команды.
Нам требуются специалисты с опытом работы во Front-end, Back-end разработки, верстальщики, СЕО специалисты и маркетологи. Если в одном из пунктов выше вы имеете хороший опыт и способны привнести в проект свежие идеи и развить его, то смело пишите нам, мы будем рады ответить каждому.
Если вы только начали путь к построению карьеры веб разработчика, но у вас недостаточно опыта, то следующая инструкция для вас.
После этого мы будем готовы сделать вам предложение по сотрудничеству и работе в команде.
Постояноство и регулярность в изучении и в практике помогут вам на пути приобретения новой профессии.
Желаем вам удачи и будем рады видеть вас в нашей команде.
React 18 is here! What’s new?
React Core Team released an alpha version of React18 recently. This release is more focused on User Experience and internal architecture changes, including adaptation to concurrent features.
We can install React 18 right away using:
Exit fullscreen mode
Exit fullscreen mode
What’s New?
1. The New Root API :
We usually create a Root level DOM level like his and append the React App. This has now been deprecated and is now called «Legacy Root API»
Exit fullscreen mode
Instead, a new Root API is introduced in React18, which looks like this :
Exit fullscreen mode
React18 will ship with both Legacy Root API and the New Root API to maintain a smooth transition of React 17(or older) apps to React 18.
Using New Root API over Legacy Root API :
There are quite a few improvements :
a.)Easy to use hydrate function as we can pass an optional boolean value directly to the root.
Legacy Root API :
Exit fullscreen mode
New Root API :
Exit fullscreen mode
Read more about hydration here
b.) Improvements in render callback :
In Legacy Root API, we could pass a render callback function. This is an anonymous function that renders/runs after the root component has been mounted.
Exit fullscreen mode
This approach has been changed in New Root API, instead of using callbacks, React Team suggests using requestIdleCallback or even native setTimeout
2. startTransition API :
This is a new API introduced with this release, which helps in keeping the current webpage responsive and being able to do heavy non-blocking UI updates at the same time.
One important use case for startTransition could be when a user starts typing in a search box. The input value has to be immediately updated while the search results could wait few milliseconds(as expected by the user).
This API provides a way to differentiate between quick updates and delayed updates.
The delayed update(i.e. transition of one UI view to another) is termed as Transition Updates.
For urgent updates like typing, hover, clicking, we call props/functions usually like this :
Exit fullscreen mode
For non-urgent or heavy UI updates, we can wrap it in a startTransition API as :
Exit fullscreen mode
3. Strict Effects coming to Strict Mode :
When a component is wrapped in Strict Effects, React will make sure to «intentionally» run side-effects twice to detect unusual behaviour/pattern, which usually a pain point when working with useEffect mounting and cleanup functions.
4. SSR Improvements :
Server-Side Rendering is getting an architectural overhaul in this release including improvements on first loading screen time.
In the trivial version(till React 17), SSR had to load the entire page before it can start hydrating page.
Exit fullscreen mode
We can use for several components fetching data at different times keeping important components interactive.
5. Suspense List :
Another React 18 concurrent feature, which «orchestrates» the order in which heavy data fetched components appear on the screen.
A takes in revealOrder prop with values forward, backward or together
Exit fullscreen mode
Here the card component will be revealed in a forward direction(until the data is fetched, will fell back to LoadingSpinner Component). Similarly, backwards will reveal Cards in reverse order, and together prop will render everything «together»
*6. useDeferredValue : *
useDeferredValue takes in a state value, a timeout in milliseconds and returns a «deferred version» of that value. This value lags by the provided timeout seconds.
Exit fullscreen mode
This could be a use case for a text input field. The text input would be immediately rendered to the screen however the text props takes in a useDeferredValue and returns a defferedText which lags by 3 seconds. This results in delaying the Card Lists component while still allowing users to have the text field feel snappy.
Exit fullscreen mode
Wrapping Up
React18 has been mostly about concurrent features rather than a full-blown concurrent mode (which has been hyped a lot from React16) reason being the application and libraries author can have a smooth transition and not any breaking changes.
React18 is an alpha release right now and not suitable for production shipping so APIs might evolve until it reaches a stable release by the end of this year(expected). This concludes our post about React18.
** Some Important Resources that I have collected over time: **
_ Loved this post? Have a suggestion or just want to say hi? Reach out to me on Twitter _