The long-awaited React v18 was finally released a few months ago. Although there were no major changes, there were some interesting features added that are worth taking a look at. This article will go over some new additions and how to upgrade to React v18.

How to Upgrade to React 18

To install the latest version of React run this command in a terminal:

        npm install react react-dom
    

Or if you're using yarn:

        yarn add react react-dom
    

Once you've installed the latest version, you can start taking advantage of its new features.

There are several additions in React 18; here are four of the most noteworthy ones.

1. Strict Mode

StrictMode is a feature you can use to highlight potential problems in an application. Strict mode checks run in development mode only and will not impact the production build. However, they can be very useful in identifying potential issues in your code.

You can enable strict mode for any part of your application. For example, you could enable it for all of your components, or just for some of them.

        import React from 'react';
 
function DemoExample() {
  return (
    <div>
      <FirstComponent />
      <React.StrictMode>
          <SecondComponent />
          <ThirdComponent />
      </React.StrictMode>
      <FourthComponent />
    </div>
  );
}
    

In the above code, all four components would be checked for potential problems. However, strict mode checks will only apply to the <SecondComponent /> and <ThirdComponent />.

StrictMode also helps in other ways, such as:

• Identifying components with unsafe lifecycles: If a component has a lifecycle method that is marked as unsafe, strict mode will warn you about it.
• Warning about legacy string ref API usage: If you are using the legacy string ref API, the strict mode will warn you about its usage.
• Warning about deprecated findDOMNode usage: If you are using the deprecated findDOMNode API, the strict mode will warn you about it.
• Detecting unexpected side effects: If a component is triggering side effects (such as setState) in unexpected places, the strict mode will warn you about it.
• Detecting legacy context API: If you are using the legacy context API (which is now deprecated), the strict mode will warn you about it.
• Ensuring reusable state: If you have a state that is used by multiple components, strict mode will help ensure that it is properly synchronized.

Overall, strict mode can be a useful feature in development to help identify potential problems in your code.

2. Transitions

Transitions allow you to mark certain UI updates as non-urgent. This means React can prioritize other updates that are more important.

For example, if you have two text fields—one for a search query and one for its results—you’d want to mark the search results text field as a transition. That way, React knows that it doesn't need to urgently re-render that text field every time the user types something in the search query text field.

You can use the startTransition function to mark a UI update as a transition. Here's an example:

        import { startTransition } from 'react';
 
startTransition(() => {
  // Mark any non-urgent state updates inside as transitions
});
    

This code would mark all state updates inside the startTransition function as transitions. That way, React can focus on other more important UI updates.

3. Automatic Batching

React provides a helpful feature called batching which reduces the number of re-renders that take place when a state changes. This can be very helpful in optimizing performance, particularly when working with asynchronous code.

Previously, if you had a promise or were making a network call, the state updates would not be batched, and React would have to re-render multiple times. However, with automatic batching in React 18, all state updates are batched, even within promises, setTimeouts, and event callbacks. This significantly reduces the work that React has to do in the background.

You can batch state updates manually by using the flushSync function, but as of React 18, this process is now automatic. This results in much better performance, as React will wait for a micro-task to finish before re-rendering.

4. New Hooks

Version 18 introduces many new React hooks, including useId, useTransition, and useDeferredValue. These new Hooks provide a great way to add extra functionality to your React apps with minimal effort.

React 18 Delivers Increased App Performance

React 18 is here, and it brings with it some great improvements to web app performance. With the new version of React, you can easily create web apps that are more responsive and perform better overall. So if you're looking to create a web app that runs smoothly and looks great, be sure to check out React 18.