This is the 26th day of my participation in the August Text Challenge.More challenges in August
The long-awaited React 18 version is finally here. Its team has finally unveiled an alpha version of React 18 and its plans. Learn about the new features here.
The long-awaited React 18 version is finally here. Its team has finally revealed an alpha version of React 18 and its plans, though the official release is still pending. This time the team tried something and released the plan first to gauge their user feedback, as the last version of React 17 wasn’t that popular with developers.
React JS is near the top of the list of most popular frameworks, according to a survey of front-end frameworks. As a result, the developer community expects more from the framework and is therefore less satisfied with previous releases.
So React 18 will shine this time. For starters, the team is working on a new approach. They brought together a panel of experts, library authors, educators, and developers for a working group. Initially, it will be a small group.
I am not part of this release but follow the team in their GitHub discussion group. From the information gleaned there, I can say they planned better this time.
React 18’s main content will be
- Some important performance improvements out of the box
- New concurrency features
- Basic improvements to server-side rendering areas
In this article, I’ll explain the three main features the team introduced with React 18. So, explore React 18’s features with me.
1. The concurrent
React 18’s central theme is concurrency. Do you know what it means? Let me explain something to you first.
Concurrency is the ability to perform multiple tasks simultaneously. Consider the case for a standard React application, assuming that the animation works in a component while the user can type or click on other components of React.
Here, the animation is also rendered in the React context as the user types and clicks buttons.
React must handle all function calls, hook calls, and event callbacks, some of which can even happen at the same time. If React keeps rendering animation frames, users will think the application is stuck because it won’t React to their input.
Now React works on single-threaded processes and must merge, reorder, and prioritize these events and functions to provide the best and high-quality experience for the user.
To do this, React uses an internal “scheduler” that prioritizes and requests these callbacks.
Before React 18, users had no control over the order in which these functions were called. But for now, it gives the user some control over this event loop through the Transition API.
2. Automatic processing
When a set of React updates multiple states to a single render to improve performance, it is called batch processing.
For example, if you have two status updates in the same click event, React always batches them into a re-render. If you’re running the following code, you’ll notice that React only performs code rendering once per click, even though you set the state twice:
function App() {
const [count, setCount] = useState(0);
const [flag, setFlag] = useState(false);
function handleClick() {
setCount(c= > c + 1); // Does not re-render yet
setFlag(f= >! f);// Does not re-render yet
// React will only re-render once at the end (that's batching!)
}
return (
<div>
<button onClick={handleClick}>Next</button>
<h1 style={{ color: flag ? "blue" : "black}} ">{count}</h1>
</div>
);
}
Copy the codeIt benefits performance because it avoids unimportant re-rendering. It also prevents the component from rendering a half-complete state that updates only a single state variable, resulting in errors. You might imagine that a restaurant waiter would not run to his kitchen while you choose your first dish, but wait for you to finish your order.
However, React’s batch update time is not fixed. This is because React used to only batch update during browser events (like clicks), but here we update the state after the event has already been processed (in the FETCH callback) :
function App() {
const [count, setCount] = useState(0);
const [flag, setFlag] = useState(false);
function handleClick() {
fetchSomething().then(() = > {
// React 17 and earlier does NOT batch these because
// they run *after* the event in a callback, not *during* it
setCount(c= > c + 1); // Causes a re-render
setFlag(f= >! f);// Causes a re-render
});
}
return (
<div>
<button onClick={handleClick}>Next</button>
<h1 style={{ color: flag ? "blue" : "black}} ">{count}</h1>
</div>
);
}
Copy the codeIn automatic batch processing (after updating your system to React 18), it always rerenders once, no matter where the state comes from.
If you don’t want to batch
Here, you must use Flash synchronization to rerender the components.
3. SSR supports Suspense
It is an extension of server-side rendering (SSR) logic. In a typical React SSR application, the following steps occur:
- The server retrieves relevant data that must be displayed on the UI
- The server renders the entire application as HTML and transmits it to the client as a response.
- Client downloads JavaScript packages (not including HTML)
- In the final step, the client connects javascript logic to HTML (called chocolate).
The problem with typical SSR applications is that each step of the entire application must be completed immediately before the next step can be taken.
But now React 18 has tried to fix this problem. Suspense> components revolutionize your application by breaking it down into smaller, independent units that go through the steps above. As a result, users will see application content quickly and start interacting with it faster.
4. The transition
The Transition API is an incredible feature that comes with React 18. It allows users to solve problems with frequent updates on the big screen. For example, type in the input field of the filtered data list. You must evaluate the value of the region in the state to separate the data and control the input field values. This code might look like the following:
Update input values and search results:
setSearchQuery(input);
Every time the user types any character, we update the input value and use the new value to find the list and display the results. When everything is rendered, it can cause the page to delay large screen updates, making other interactions or typing slow and unresponsive. Even if your list is not too long, items can be complex and change with each keystroke. There is no clear way to optimize rendering.
Conceptually, there are two issues that updates must occur. The first is an emergency update, where you have to change the value of the input field, and possibly some UI around it. The second, by contrast, is a less urgent update that displays search results.
Emergency: Displays the input:
setInputValue(input);
No hurry: Display results:
setSearchQuery(input);
Now, the new start transformation API allows updates to be marked as
function App() {
const [count, setCount] = useState(0);
const [flag, setFlag] = useState(false);
function handleClick() {
fetchSomething().then(() = > {
// React 17 and earlier does NOT batch these because
// they run *after* the event in a callback, not *during* it
setCount(c= > c + 1); // Causes a re-render
setFlag(f= >! f);// Causes a re-render
});
}
return (
<div>
<button onClick={handleClick}>Next</button>
<h1 style={{ color: flag ? "blue" : "black}} ">{count}</h1>
</div>
);
}
Copy the codeconclusion
React 17 failed to meet the needs of the developer community. Much of the focus is on making it easier to upgrade React itself. The React 18 version will do the opposite. It provides a lot of functionality for developers.
But, yes, keep in mind that the final version is subject to change because it is beta. Once released, most of the functionality is likely to run around concurrency. This is good news because it will help developers make their applications faster and more efficient. With all these new tools, they can better fine-tune their performance.
Good luck!
DZone by Gerrard Cooper