The much anticipated React 18 update is here, and here is everything you need to know about ‘What’s New in React 18’. Let us see the latest React 18 features and changes that will revolutionize how the world Reacts!

React v18.0 is here after a long wait and many speculations in the React community about the major updates this version will bring to the developers’ community and the clients as well. From the beginning, the React team has been very cautious about introducing these groundbreaking upgrades to the React developers at a pace that they can understand, adopt and embrace entirely. They invited a panel of experts, library authors, developers, and educators from various fields to participate in their React 18 Working Group for giving inputs, providing feedback, and collaborating with them on the release. This group aims to prepare the React ecosystem for a smooth, seamless adoption of React 18 for existing libraries and applications. Now that React 18 is finally out, there are many React 18 new features and changes that will redefine React in the future. There has been major consideration and measures taken to ensure that upgrading your current React project to React 18 doesn’t break your existing code. Without further ado, let’s get right into it:

Also Read: ReactJs Advantages and Disadvantages

1. React 18 Concurrent Mode

This is one of the most important React 18 new features that solve an age-old ignored problem in React – concurrency. It is not exactly a feature; however, it works more like a behind-the-curtains function, that powers React to prepare various instances of your UI concurrently (at the same time). Generally, React designs APIs, and hides the implementation details from developers. They believe React developers need to focus on how using React features will help them achieve the user experience they want for their clients and React will figure out how to deliver that experience. Although, Concurrent React is not just an implementation detail. It is a fundamental React change that updates React’s core rendering model which makes it important to understand how Concurrent React works in React 18. Before React 18, or even before upgrading to React 18 and not enabling concurrent features, updates are rendered in a single, uninterrupted, and synchronous transaction. The problem with asynchronous transactions is once you initiate an update to render, nothing can interrupt it until the result is shown on the user’s screen. This is not always the case in concurrent rendering. React can very well initiate rendering an update, pause it in middle, or abandon an already in progress rendering update entirely. React guarantees a seamless user experience and consistent UI at all times even when a render is interrupted. This enables React to create new screens behind the scenes without affecting the main thread. Hence the main thread can respond to the user input as soon as it receives it, even if it is stuck in rendering a middle to large update. This creates a seamless user experience. Another benefit of concurrent React is the reusable state. Through concurrency, React will be able to eliminate sections of the overall UI from the users’ screen and add them back whenever by reusing its previous state. For instance, when a user changes tabs and returns to the original tab, React will be able to store the state of the original tab in the same state as it was before. React 18 is going to introduce a new component called to implement this pattern.

2. Automatic Batching

React has always used batching for grouping state updates using event handlers and inbuilt hooks. Doing so helps prevent components from unnecessarily re-render for all state updates, which results in improvised performance. Until React 17, batching was only supported for browser events. With the new React 18 release, React is launching an improved version of batching called ‘Automatic Batching‘. Automatic Batching will enable batching for all state updates irrespective of where they’re coming from with createRoot. This will include batch state updates, asynchronous operations, intervals, native event handlers, and timeouts.

React 17 batching:

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function handleClick() {
    fetchSomething().then(() => {
      // React 17 and earlier versions 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>
  );
}

Here as you can see, as React 17 and previous versions only batched updates after the event is in a callback, it sets both functions to cause a re-render, making the entire React app rerender twice separately. However, React 18 overcame this limitation by batching updates inside of any promises, timeouts, native event handlers, or any other events just like updates inside React events were handled in React 17. This will significantly reduce unnecessary re-renders, improving application performance:

React 18 Automatic Batching:

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function handleClick() {
    fetchSomething().then(() => {
      // React 18 and beyond WILL batch these:
      setCount(c => c + 1);
      setFlag(f => !f);
      // 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>
  );
}

Stopping Automatic Batching with flushSync()