Unlock the Power of React 18 and React Redux 8

Upgrading to React Redux 8: A Smooth Transition

To test the waters, let’s upgrade a simple to-do application to React Redux 8 and explore the changes. We’ll use the latest versions of React and Redux, and then inspect the application for breaking changes and unexpected behavior.

The Upgrade Process

To add React Redux 8 to an existing React application, follow these steps:

1. Run the command npm install react-redux@8 to install React Redux 8.
2. Update the React version to 18 by running npm install react@18.
3. Navigate to the index.tsx file and replace the old code with the new createRoot API:

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

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

What to Expect

After upgrading, you’ll notice that the application functions as expected, with no breaking changes or unexpected behavior. The public APIs, connect and useSelector, remain the same, ensuring a seamless transition.

Under the Hood: Notable Changes in React Redux 8

• TypeScript Conversion: The entire codebase has been converted to TypeScript, making it easier to write type-safe code and produce bug-free applications.
• Compatibility with React 18: React Redux’s public APIs have been rewritten to support React 18, including the new useSyncExternalStore API.
• Modernized Build Output: React Redux now compiles to ES2017, taking advantage of modern browser support and producing smaller bundles.
• Removed Unused Legacy APIs: The connectAdvanced API and connect‘s pure option have been removed, simplifying the package.

New Features to Expect in React Redux 8 and React 18

• Automatic Render Batching: All renders are batched, regardless of their trigger, ensuring efficient rendering.
• Server-Side Rendering: With Suspense, React 18 makes major performance improvements to SSR, allowing for asynchronous rendering and faster content delivery.
• Transitions: The startTransition API enables prioritization of urgent updates over secondary updates, ensuring a better user experience.

The Future of React Redux

With React Redux 8, existing applications are expected to function properly after upgrading. If you encounter any issues, the Redux team is taking feedback to ensure a smooth transition.