Post

Upgrading React from 17 to 18: A Comprehensive Guide

Posted
By Joey
3 min read

Upgrading React from 17 to 18: A Comprehensive Guide

React 18 introduces several new features and improvements that enhance performance and developer experience. This guide will walk you through the process of upgrading your React application from version 17 to 18, covering dependency updates, breaking changes, and best practices.

1. Update Dependencies

The first step in upgrading to React 18 is to update your dependencies. Here are the key packages you need to update:

1
2
3
4
5
6
7
8
9
10

{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.5"
  },
  "devDependencies": {
    "@cfaester/enzyme-adapter-react-18": "^0.8.0"
  }
}

To update these dependencies, run:

1
2

npm install react@18.2.0 react-dom@18.2.0 react-redux@8.0.5
npm install --save-dev @cfaester/enzyme-adapter-react-18@0.8.0

Note: Make sure to remove the old Enzyme adapter for React 17:

1

npm uninstall @wojtekmaj/enzyme-adapter-react-17

2. Update Test Setup

Fix TextEncoder Missing

In some testing environments, you might encounter issues with TextEncoder and TextDecoder. To resolve this, add the following to your src/setupTests.js file:

1
2
3

import { TextEncoder, TextDecoder } from 'util';
global.TextEncoder = TextEncoder;
global.TextDecoder = TextDecoder;

Update Enzyme Adapter

If you’re using Enzyme for testing, update the adapter in your src/setupTests.js file:

1
2
3
4

import { configure } from 'enzyme'
import Adapter from '@cfaester/enzyme-adapter-react-18'

configure({ adapter: new Adapter() })

3. Update ReactDOM Rendering

React 18 introduces a new root API for rendering. Update your src/index.jsx file:

1
2
3
4
5
6
7

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

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

This replaces the old ReactDOM.render() method.

4. Handle Breaking Changes

Automatic Batching

React 18 introduces automatic batching for better performance. This means that multiple state updates will be batched together, potentially reducing the number of re-renders. If you rely on immediate state updates, you might need to adjust your code.

Strict Mode Changes

In React 18, Strict Mode now double-invokes effects to help identify potential issues with effect cleanup. This might expose bugs in your existing code, so be prepared to fix any issues that arise.

New Hooks

React 18 introduces new hooks like useId, useTransition, and useDeferredValue. Consider using these hooks to optimize your application’s performance and user experience.

5. Leverage New Features

Concurrent Rendering

React 18 introduces concurrent rendering, which allows React to interrupt rendering to handle more urgent updates. This can lead to a more responsive user interface.

Suspense on the Server

Server-side rendering now supports Suspense, allowing you to specify loading states for different parts of your application.

6. Testing Considerations

  • Update any test utilities or libraries that depend on React internals.
  • Be aware that the behavior of act() has changed slightly in React 18. Make sure your tests are still passing and update them if necessary.

7. Performance Monitoring

After upgrading, monitor your application’s performance. React 18’s changes, especially around automatic batching and concurrent rendering, may affect your app’s behavior and performance.

Conclusion

Upgrading to React 18 brings significant improvements and new capabilities to your application. While the process is generally straightforward, it’s important to thoroughly test your application after the upgrade to ensure everything works as expected.

Remember to consult the official React documentation and release notes for more detailed information on specific features and changes in React 18.

This post is licensed under CC BY 4.0 by the author.