Why is New React 18 Special?

React 17 was announced last year; It was primarily designed to improve basic groundwork and architecture for upcoming updates and didn’t offer new features. It was intentionally built for upcoming update adoption to make things easier and faster for the future. Now Facebook and React community is preparing to get us into React 18. On their web blog in June, they have announced that they are working on React 18, and we can expect it next year. As of Now, React 18 is in the alpha stage, and beta builds are just 3 to 5 months away. They mentioned a timeline of their work that we will discuss later, and a dedicated team working on improving alpha React 18, and the community provides them log and bugs. Overall there are a lot of talks and work with React 18; Here, we will discuss All React 18. First, know about ReactJS.

What is ReactJS?

React is free to use and helps developers to build the user interface and its components. Facebook is the primary maintainer for react with some other individual developers and companies. React is widely use in a single page and mobile application development.

Released by Facebook in 2013, React is a JavaScript library for modern apps and web development. React is used to handle the view layer and can be used to develop both web and mobile applications. In addition, there is a mobile-specific react framework for mobile app development named ‘React Native.’

React empowers developers to build large web applications that can modify data without reloading the web page. The main objective of React is to be fast, scalable, and simple to work with. React works only on UI or UX in the application. This epistolizes to view in the MVC template. It can be used with a combination of other JavaScript libraries or frameworks, such as AngularJS in MVC.

React 18 is coming

We are currently using React 17.0.2, and React 18 is just a few months away; until then, developers provided alpha builds of React 18 for testing and feedback. With React 18 alpha, we can react to 18’s upcoming features that we will talk about later in this article. 

Every ReactJS user was waiting for something big in the form of an update, and then they just announced ReactJS 18. From React 17, ReactJS Developers kept us in wait and suspense, but now we all know that we will get what we have been waiting for. Still, there might be more stable builds of ReactJS 18, but we will talk about everything that we know so far.

What’s new in React 18?

Even Alpha Builds includes many changes and new features; then, stable builds will be unique. Here are the features that we have in the latest alpha build of React 18 – 

• Automatic Batching
• Concurrent Rendering
• Root API
• Strict Effect Mode

Automatic Batching

Groups of React multiple-state turning into one render for better performance is known as Batching.

Before, we had to batch two or more state updates inside the same event into one rerender batch. This will prevent the half-finished rendering of components. With React 18, All this batching process get change and update. In addition, react 18 Automated this whole process making this batching process more consistent and streamlined.

const App = () => {
  const [color, setColor] = useState(0);
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setColor((count) => count + 1); // No re-render yet
    setCount((count) => count + 1); // No re-render yet
    // Re-render (updates batched)
  }
  return (
    <div>
      <button onClick={handleClick}>Next</button>
      <span style={{ color: color % 2 === 0 ? "blue" : "black" }}>{`${count} ${color % 2 === 0 ? 'Even':'Odd'}`}</span>
    </div>
  );
}

It can always rerender automatic batching no matter where the states are.

Concurrent Rendering

Another significant change seen in React 18 is ‘Concurrent Mode’ instead of ‘concurrent rendering’ of previous react versions.

It is not just a name change; this will allow adopting concurrent features without rewriting codes and according to developers. There will be many features in React 18 that might come open; As alpha, not all of them have mention anywhere yet. Here are some concurrent mode features that we know for now –

• startTransition: Keeps the user interface interactive even during Big transitions.
• <SuspenseList>: Loading Indicators order co-ordinator
• Server-Side Rendering with selective Hydration: Helps in reducing loading time and be interactive and fast.
• useDeferredValue: defer the update for your app

The best part about all these features is that we don’t have to include them throughout the whole development; We can choose to build with these as opt-in at any part of the app.

This made the new Concurrent Mode more fast, productive, effortless, and efficient.

Root API

Root API is a pointer for data structure in previous versions of React. They are primarily use to track render trees. With the new React 18, It will deploy two different root APIs, Legacy root API and the new ReactDOM.createRoot. the legacy root will run legacy mode in ReactDOM.createRoot API. This ReactDOM.createRoot can integrate improvements to the app efficiently and add a deprecated warning.

Old root API

import React from 'react';
import ReactDOM from 'react-dom;
import App from 'App';
ReactDOM.render(<App />, document.getElementById('root'));

New Root API

import ReactDOM from 'react-dom';
import App from 'App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Strict Effect Mode

React 18 will provide Strict Effect Mode, which will improve DX and development versions. With this react can detect unusual movement by running side effects twice like-

mount-> unmount-> mount

React 18 will be a vast improvement, and we are all going to leverage its advanced features. Developers are halfway through the development yet, still impressed users with these fantastic features. You can try Alpha ReactJS 18 from their website or wait for 3 to 5 months for a richer stable build.