A Glimpse of React 18

React 18

React 18 brings some fascinating new features. When React 18 came out a year ago, the developers said that it would be adopted in stages. This is precisely what they have done this year. You may now update your app to the latest version.

Based on how you use it, React 18 has a few breaking changes. Overall, it makes things faster. For example, it does more batching by default, so you don’t have to manually batch changes in different programs or even library codes.

Some people will definitely like this new release. So, let’s take a closer look at some of the most significant new features of this Facebook upgrade.

New Features of React 18 (differences with React 17)

Concurrency in React 18

It’s now possible to stop rendering in real-time with React 18 thanks to concurrent rendering. Even if React is in the middle of rendering, it can react quickly to user actions.

When rendering was done in the days before React 18, it was an unbroken chain of synchronous transactions that could not be interrupted once it had begun. The addition of concurrency to the React rendering process is a core change. React is able to pause rendering because of concurrency.

In React 18, the new concurrent rendering core makes it possible to add new features like suspense, streaming server rendering, and transitions.

Automatic Batching

When you call setState in React, batching help to limit the number of re-renders that occur when a state changes. Previously, state modifications in event handlers were batch-processed by React.

React 18 provides automatic batching, which enables batching of all state modifications, including promises, setTimeouts, and event callbacks. This decreases the amount of work React has to do in the background. Before re-rendering, React will wait for a micro-task to complete.

Automatic batching is turned on by default in React, but it can be turned off with flushSync.

Suspense On the Server

On the server, suspense is now available. It was previously only possible on the client-side via React.lazy code splitting. However, you can now have some form of placeholder while your components are “suspended.”

If any of the components in the tree “suspend,” suspense will fall back to the component you gave it. But what does “suspend” mean for a component? It could mean a variety of things, but it always means that the component isn’t ready to render-it could be missing data or code.

Transitions

Transitions highlight UI improvements that don’t require immediate resources.

When typing in a typeahead field, a blinking cursor gives visual feedback, and a search mechanism searches for the written data. Visual user feedback is crucial. 

Transitions are non-urgent updates. React will prioritize non-urgent UI updates marked as “transitions.” This improves rendering and eliminates stale rendering. The transition makes upgrades non-urgent.

Strict Mode

Strict mode in React 18 will imitate mounting, unmounting, as well as re-mounting the element with a previous state. With this, React can mount earlier screens by remounting trees and using the same component state before unmounting. This lays the groundwork for a future reusable state.

If you use the strict mode, your components won’t get damaged when you mount and unmount your effects over and over again.

Other Significant Updates Include:

  • New Browser
  • Undefined Rendering of Components
  • Unmounted components have no setState warning.
  • Improved Use of Memory 

Upgrading to React 18

To upgrade just add the latest React and React dom to the following command lines:

yarn add react react-dom

You will need to some more changes after you upgrade to react 18.

// Before
import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab="home" />, container);

// After
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<App tab="home" />);

Remove callback from render as well.

// Before
const container = document.getElementById('app');
render(<App tab="home" />, container, () => {
  console.log('rendered');
});

// After
function AppWithCallbackAfterRender() {
  useEffect(() => {
    console.log('rendered');
  });

  return <App tab="home" />
}

const container = document.getElementById('app');
const root = createRoot(container);
root.render(<AppWithCallbackAfterRender />);

Note: Upgrading to react 18 may show more warnings/errors as per usage react 17 or the previous versions so you may need to do more changes than just shown above.

Conclusion

It’s important to remember that React 18 is all about making the user experience better. Your current code should be unaffected by the upgrade to React 18, and the process should be simple.  Maybe an afternoon is all that is required for the update to be completed.

Checkout our trending react templates

Read Related –