Why we updated to React 18

React is a popular JavaScript library that enables developers to build efficient, dynamic, and interactive web applications. With every release, React comes with new features and improvements that make the development process smoother and more efficient. We build our web application in React, starting the first release with React version 16.

We are trying to keep our application up-to-date to ensure to have always new functionalities and top performances. We did the upgrade couple of months ago after a long research and testing to ensure that our web application is always on top for all our customers. React 18 is the latest release that comes with several new features and improvements that enhance the developer experience. In this article, we will explore the key improvements in React 18 compared to React 17 and provide code examples to illustrate each improvement.

1. Automatic Batching of State Updates

React 18 introduces automatic batching of state updates, which means that multiple state updates are now batched into a single update. This helps reduce the number of re-renders and improves the performance of the application. Previously, developers had to manually batch state updates using the setState function, which was cumbersome and error-prone.

Here is an example of how automatic batching of state updates works:

In the example above, in React 17 and below, three separate calls to setState were required to increment the count by 3. This trigger the page to be rendered 3 times impacting the performance in the case there are too many components. In React 18, these three calls are automatically batched into a single update, resulting in a single render improving the overall performance of the application.

‍2. Concurrent Rendering Improvements

Concurrent rendering is a new feature that allows React to break down large updates into smaller chunks, which can be processed asynchronously. This helps improve the performance of the application by reducing the time it takes to render large components. In React 18, the concurrent rendering engine has been further improved, making it faster and more efficient.

Here is an example of how concurrent rendering works:

In the example above, the ExpensiveComponent is a component that takes a long time to render. In React 17 and below, all three instances of ExpensiveComponent would be rendered sequentially, causing a delay in the rendering process. In React 18, the React.Suspense component is used to break down the rendering of each instance of ExpensiveComponent into smaller chunks, making the rendering process faster and more efficient.

3. New Root API

React 18 introduces a new Root API that allows developers to create multiple roots in a single application. This means that developers can now render multiple parts of the application independently, which can help improve the performance of the application. The new Root API also provides better support for server-side rendering.

Here is an example of how the new Root API works:

In the example bove, we showed how to use the new createRoot method to create a new root in the application. Once we have created the root, we can render our app within the root by calling the render method on it. This method takes the component to be rendered as its argument.

Using the new Root API allows us to create independent roots within the same application. This can be useful in scenarios where we want to render different parts of the application separately. For example, we can create one root for the navigation bar, one for the content, and one for the footer.

4. Improved Error Handling

React 18 also includes improved error handling, making it easier for developers to debug errors in their code. In earlier versions of React, errors would often cause the entire application to crash, making it difficult to identify the root cause of the error.

In React 18, the error boundary feature has been improved, allowing developers to catch and handle errors more efficiently. Error boundaries are components that catch errors that occur in their child components and display an error message instead of crashing the entire application.

Here is an example of how to use error boundaries in React 18:

In the example above, we create an error boundary component that catches any errors that occur within its child components. We use the getDerivedStateFromError method to update the state of the error boundary component when an error occurs. We then use the componentDidCatch method to log the error to the console.

Those are only few examples about new features introduced in React18. To recap those are 10 bullet points about new features and why this new release is a big improvement:

1. Concurrent Mode: React 18 introduces Concurrent Mode, which is a new set of features that makes it easier to create smooth and responsive user interfaces. Concurrent Mode allows React to break up large updates into smaller pieces, prioritise which updates to process first, and even pause and resume updates to avoid blocking the main thread.
2. Suspense: Suspense is a new feature in React 18 that allows components to wait for data to load asynchronously before rendering. With Suspense, you can create a loading state for your application that is more user-friendly and informative than a blank screen or spinner.
3. Server Components: React 18 introduces a new type of component called Server Components, which can be rendered on the server and sent to the client as HTML. This can improve the performance of your application, especially for first-time users who don't have a cached version of your site.
4. Automatic Batching: In previous versions of React, you had to manually batch updates to avoid performance issues. With React 18, batching is now automatic, which means that you can make multiple state updates in a single render cycle without any additional effort.
5. Improved Profiling: React 18 includes improvements to the profiling tools that make it easier to analyse and optimise your application's performance. The new profiling tools allow you to see how long it takes for each component to render and identify any performance bottlenecks.
6. Improved Accessibility: React 18 includes new features and improvements to help make your applications more accessible to users with disabilities. For example, the new focus-visible attribute makes it easier for users who navigate with a keyboard to see which element has focus.
7. New APIs: React 18 introduces several new APIs that make it easier to work with React. For example, the new useTransition hook allows you to create animations that respond to user interactions, while the new useDeferredValue hook allows you to defer the evaluation of expensive computations.
8. Improved Hydration: React 18 includes improvements to the hydration process, which is the process of rendering server-rendered HTML on the client. The new hydration process is faster and more efficient, which can improve the performance of your application.
9. Improved Error Handling: React 18 includes improvements to error handling, which make it easier to debug and fix issues in your application. The new error boundary API allows you to catch and handle errors at the component level, which can prevent them from crashing your entire application.
10. Improved Developer Experience: Finally, React 18 includes improvements to the developer experience, which make it easier to build and maintain complex applications. For example, the new "startTransition" API allows you to defer rendering until after state updates are complete, which can make it easier to write asynchronous code. Additionally, the new "component stack traces" feature provides more detailed information about errors, which can help you quickly identify and fix issues.

Conclusion

React 18 introduces several new features and improvements that enhance the developer experience and improve the performance of the application. These improvements include automatic batching of state updates, concurrent rendering improvements, a new Root API, and improved error handling. By using these features, developers can build more efficient, dynamic, and interactive web applications.

We hope this article has helped you understand the key improvements in React 18 compared to React 17 and provided you with code examples to illustrate each improvement. Happy coding!