How to Upgrade to React 18

Summary

React 18 introduces a new concurrent renderer with gradual adoption strategy. Key changes include new root APIs, automatic batching, updated server rendering APIs, and stricter development checks.

Key Points

• New Root API: Replace ReactDOM.render() with createRoot() to enable concurrent features
• Automatic Batching: All state updates are now batched by default for better performance
• Server Rendering Updates: New streaming APIs renderToPipeableStream and renderToReadableStream
• TypeScript Changes: children prop must be explicitly defined in component interfaces
• Strict Mode Enhancement: Components are unmounted/remounted in development to catch effect issues
• Testing Updates: Set globalThis.IS_REACT_ACT_ENVIRONMENT = true in test setup
• IE Support Dropped: Internet Explorer is no longer supported

Installation

npm install react react-dom
# or
yarn add react react-dom

Migration Examples

Client Rendering:

// Before
import { render } from 'react-dom';
render(<App />, container);

// After
import { createRoot } from 'react-dom/client';
const root = createRoot(container);
root.render(<App />);

Server Hydration:

// Before
import { hydrate } from 'react-dom';
hydrate(<App />, container);

// After
import { hydrateRoot } from 'react-dom/client';
hydrateRoot(container, <App />);