Advance Features of React 18

In the ever-evolving landscape of web development, React has consistently remained at the forefront, empowering developers to create dynamic and user-friendly interfaces. With the release of React 18, a new chapter in the React ecosystem has begun, bringing along a slew of exciting features that promise to enhance performance, responsiveness, and overall user experience. In this blog post, we’ll delve into the groundbreaking features of React 18, including Concurrent Rendering, Automatic Batching, and Transitions.

Concurrency in React 18

Imagine you have two friends to call, Alice and Bob. In the past, you’d call Alice, finish talking, and then call Bob. But what if talking to Alice takes a long time, like being put on hold? That’s not efficient.

Image showing that in a typical non-concurrent phone conversation, you have to wait for a call to be over before starting a new call.

Now, think about a smarter way. You call Alice, and if you get put on hold, you call Bob too. You’re not talking to both at the same time, but you manage both calls at once and choose which is more important.

Image showing phone conversation between Alice and Bob can be concurrent, by placing a call on hold and answering a more urgent call with Bob first.

In React 18, something similar happens with how web apps work. Before, when making things show up on a website, it was like doing one thing at a time. But now, with React 18, it can handle a few things at once. Imagine React being able to pause, do something else, and then come back to what it was doing. This makes web apps faster and better at listening to you, even when they’re doing complicated things.

In the past, once a website started showing things, it had to finish before it could do anything else. But now, with React 18’s new ability, it can pause, handle other things, and then come back to showing stuff. React 18’s way of handling things is like being able to put a phone call on hold and talk to someone else.

Automatic Batching

In the world of React 18, a noteworthy addition is automatic batching, a feature that’s akin to optimizing your grocery shopping. Let’s unravel this concept through an analogy that takes us to the supermarket, making the intricacies of automatic batching easier to grasp. Consider you’re planning to make a delicious pasta dinner. If you’re smart about it, you’ll jot down all the ingredients you need, make a single trip to the store, and gather everything in one go.

Optimizing grocery shopping by making a single trip with a comprehensive list of ingredients. This is the essence of batching. It’s the opposite of a situation where you start cooking, realize you’re missing an ingredient, rush to the store for that ingredient, return to continue cooking, discover yet another missing item, and repeat this cycle until you’re frazzled. Now, translating this to React 18’s automatic batching, the magic unfolds. In the realm of web development, state changes trigger re-renders. Previously, React would batch state updates that happened in event handlers, like this:

const handleClick = () => {
  setName();
  setEmail();
  setPhoneNo();
}

// Re-rendered once at the end.

But, state updates occurring outside event handlers, like within promises or network calls, were not batched:

fetch('/person').then(() => {
  setName(); // Re-rendered 1 time
  setEmail();  // Re-rendered 2 times
  setPhoneNo();  // Re-rendered 3 times
});

// Total 3 re-renders

Clearly, this approach was not ideal for performance. Enter React 18’s automatic batching. This feature elegantly solves the problem by batching all state updates, even those nestled within promises, setTimeouts, and event callbacks. The outcome? A significant reduction in React’s background workload. Now, React patiently waits for micro-tasks to conclude before triggering a re-render. Automatic batching comes naturally in React 18. However, if you ever need to opt-out, you can use flushSync.

Transition

In the context of React 18, transitions refer to the graceful animation between different states or components within an application. Imagine a scenario where you navigate from one screen to another, and instead of abrupt changes, you’re treated to animations that guide your eye and create a sense of continuity. Transitions offer a polished touch to UI elements, making interactions feel natural and visually pleasing.

Get Abdullah Shafiq’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Example: Think of transitions as analogous to the act of opening a door. When you open a door, it doesn’t suddenly teleport from closed to open — it goes through a smooth motion. Similarly, in React 18, transitions enable UI elements to transition gracefully between states, mimicking the real-world concept of continuous movement.

React 18 streamlines the process of integrating transitions into your applications. With a combination of React’s state management and the new transition capabilities, developers can effortlessly add animations to various interactions. Whether it’s a button click that triggers a subtle fade or a navigation change accompanied by a slide effect, React 18 empowers developers to create visually appealing and coherent user experiences.

import { startTransition } from 'react';

// Urgent: Show what was typed
setInputValue(input);

// Mark any non-urgent state updates inside as transitions
startTransition(() => {
  // Transition: Show the results
  setSearchQuery(input);
});

Client Rendering

Client rendering, also known as client-side rendering (CSR), is a technique where most of the rendering process occurs within the user’s browser. In this approach, the web server sends a minimal HTML document along with JavaScript files. The browser then downloads these JavaScript files and takes charge of rendering the user interface. Common JavaScript libraries like React, Vue, and Angular excel in client rendering.

In a client rendering flow, a user has to wait a long time before the page becomes interactive. Source: React Conf 2021 Streaming Server Rendering with Suspense by Shaundai Person

Server Rendering

Server rendering, also known as server-side rendering (SSR), takes a different approach. In this method, the web server pre-renders the web page before sending it to the user’s browser. The browser still has some JavaScript for interactivity, but the page’s core content is already visible when the initial HTML is received.

In a server rendering flow, we can display meaningful data to the user much faster by sending HTML from the server. Source: React Conf 2021 Streaming Server Rendering with Suspense by Shaundai Person

For a detailed overview of client vs server rendering, check out Shaundai Person’s React Conf 2021 talk.

Conclusion

React 18’s debut introduces a new chapter in web development, showcasing revolutionary features such as Concurrent Rendering, Automatic Batching, and Transitions. This evolution, coupled with the choice between Client and Server Rendering, propels web development into an era of sophistication, speed, and user-centric design, promising delightful digital journeys ahead. Hopefully you will get an idea about Advance concepts of React 18 after reading this article.

Thanks For Reading this Article :)