React 18 has been available since March 2022. This version focuses on performance enhancements and rendering engine updates.
React 18 lays the groundwork for concurrent rendering APIs, on which future React features will be developed.
In this video, I will provide a fast overview of the React 18 features and discuss a few key concepts such as parallel rendering, automated batching, and transitions.
What exactly is Concurrent React?
The most significant change in React 18 is one we hope you never have to consider: concurrency. We believe this is mostly true for application developers, although it may be a little more challenging for library maintainers.
Concurrency is not a character in and of itself. It’s a new method behind the scenes that allows React to prepare many versions of your UI at the same time. Concurrency is an implementation detail that is valuable because of the functionality it opens. In its underlying implementation, React employs advanced mechanisms like as priority queues and multilayer buffering. However, you will not find those ideas in our public APIs.
When we build APIs, we attempt to keep implementation specifics out of the hands of developers. As a React developer, you focus on how you want the user experience to appear, while React handles the implementation. As a result, we don’t expect React developers to understand how concurrency works beneath the hood.
Concurrent React, on the other hand, is more than just an implementation detail; it’s a fundamental change to React’s basic rendering architecture. So, while understanding how concurrency works at a high level isn’t critical, it could be useful.
Concurrent React’s rendering is interruptible, which is a significant feature. Before introducing any concurrent functionality, changes are displayed the same way they were in earlier versions of React — in a single, unbroken, synchronous transaction. When using synchronous rendering, once an update begins rendering, nothing can stop it until the user sees the result on the screen.
CONCURRENCY IN REACT 18:
Consider this example from Dan Abramov’s React 18 Working group talks to better understand concurrency.
Assume we need to contact two persons, Alice and Bob. We can only have one call at a time in a non-concurrent situation. We’d call Alice first, then stop the conversation, and then call Bob.
This is OK for brief calls, but if the call with Alice includes a long waiting period (such as on-hold), it might be time consuming.
In a contemporaneous environment, we could phone Alice and then call Bob once we were put on hold.
This does not imply that we are conversing with two persons at the same time. It simply implies that we can have two or more concurrent calls and choose which one is more significant.
IMAGE CREDIT: freecodecamp
Similarly, with concurrent rendering in React 18, React may stop, halt, continue, or quit a render. This enables React to respond rapidly to user interactions even while it is in the middle of a huge rendering operation.
Before React 18, rendering was a single, continuous, synchronous transaction that could not be stopped.
Concurrency is a fundamental upgrade to the rendering process of React. React may use concurrency to interrupt rendering.
Concurrent rendering is introduced in React 18 as the foundation for new features like as suspense, streaming server rendering, and transitions.
A sneak peek into React 18 features:
Automatic batching:
React uses batching to combine numerous state updates into a single re-render for improved efficiency. We solely batched changes inside React event handlers without automated batching. By default, updates within promises, setTimeout, native event handlers, or any other event were not batched in React. These changes will be automatically batched with automated batching:
// Before: only React events were batched. setTimeout(() => { setCount(c => c + 1); setFlag(f => !f); // React will render twice, once for each state update (no batching) }, 1000); // After: updates inside of timeouts, promises, // native event handlers or any other event are batched. setTimeout(() => { setCount(c => c + 1); setFlag(f => !f); // React will only re-render once at the end (that's batching!) }, 1000);
Code Resource: reactjs.org
Transitions:
A transition is a new notion in React that allows you to differentiate between urgent and non-urgent updates.
Urgent updates indicate immediate engagement, such as typing, clicking, and pressing.
Transition updates move the user interface from one view to another.
Urgent updates, such as typing, clicking, or pressing, require a quick reaction in order to match our intuitions about how actual things behave. Otherwise, they are “wrong.” Transitions, on the other hand, are unique in that the user does not expect to see every intermediate value on screen.
When you choose a filter from a dropdown menu, you want the filter button to respond instantly when you click. However, the actual outcomes may transition independently. A minor delay would be undetectable and frequently expected. And if you alter the filter again, the results will be different.
You only want to view the most recent results if you alter the filter again before the results are rendered.
For the greatest user experience, single-user input should typically result in both an urgent and a non-urgent update. You can use the start transition API within an input event to notify React about which updates are critical and which are “transitions”:
import {startTransition} from 'react'; // Urgent: Show what was typed setInputValue(input); // Mark any state updates inside as transitions startTransition(() => { // Transition: Show the results setSearchQuery(input); });
Code Source: REACT V 18.0
Updates completed at the start Transitions are treated as non-urgent and will be halted if more important information, like as clicks or key presses, arrive. If a user interrupts a transition (for example, by entering many letters in a row), React will discard any unfinished rendering work and render only the most recent update.
use Transition: a hook for initiating transitions, with a value to track the waiting state.
start transition: When the hook cannot be utilized, the transition method is used to begin.
Transitions will enable concurrent rendering, allowing the update to be paused. If the content is re-suspended, transitions instruct React to continue presenting the current content while rendering the transition content in the background.
THE BOTTOM LINE:
To summarise, React 18 lays the groundwork for future releases while focusing on enhancing the user experience.
Upgrading to React 18 is simple, and our current code does not break as a result of the change. Therefore, hire us for your upcoming React 18 project, and let us serve you with the help of our knowledgeable team of developers.