Jordan Walke of Facebook originally released React 0.3.0 back in 2013. Since its release, React has become one of the most popular frontend development frameworks among developers. The framework has changed leaps and bounds since that original release. In June 2021, React released a new alpha version of React 18. Though there is no official release date set for React 18, the ReactJS blog said, “...we expect it will take several months of feedback and iteration before React 18 is ready for most production applications.” Although the full version it not yet released, there are many exciting updates to look forward to:

‍

1. Concurrency 

Prior to React 18, React handled all of the function calls, hook calls, and event callbacks. React, through its single-threaded process, merged, reordered and prioritized these events and functions through an internal "dispatcher". However, users could not control the order of the functions. This caused users to believe that the app was “stuck” as it did not react to inputs. But now React 18 will provide control of this event loop to the user with the Transition API. React’s new concurrency mechanism will allow React to prepare many versions of the UI at the same time, prioritizing render updates. Ultimately, this will lead to a much better experience.

‍

2. Automatic Batching

React 18’s updates will improve its batching ability greatly. Prior to React 18, React only batched updates during browser events, such as a user click. Starting in React 18, however, all updates (timeouts, native event handlers, promises) will automatically batch, no matter where they originate from. This will avoid unnecessary re-renders and “half-finished” states where only one state variable is updated, which is often the cause of UI glitches. Instead, because of this update, React’s UI will run much smoother and be much more efficient.

‍

3. SSR Support for Suspense

One of the goals of React 18 is to improve React in a server-side rendered context, so the initial page loads faster. One of the issues for React prior to the update was that the SSR sequence (retrieving the relevant data to be displayed on UI, rendering the entire app to HTML, transferring it to the client in response, downloading the JavaScript bundle, and going through hydration) was extremely time consuming. React 18, however, solves this issue. The suspense component breaks down the app into tinier, individualized units to go through the above steps.  As a result, users see and interact with the content much more quickly.

Interested in using React? Or have thoughts on how React 18 will affect your new project? Set up a call with us here.