With the use of React 18 version, React Redux 8, the React state management, is being developed parallel to include all the new features that come with React 18, including automatic batch rendering, server-side rendering (SSR), and transitions. Another major update made in React Redux 8 is the translation of its entire codebase into Typescript. This makes it easier for developers to write type-safe code and create bug-free applications. As a reliable ReactJS development company, we will explore the impact of this change on developers in this article. We will also check its compatibility with React 18’s beta version.
React Redux 8 App Upgrade
The main objective here is to see what breaking changes and unexpected behavior does the React Redux 8 app upgrade cause.
Let’s replicate and upgrade this simple to-do application by Jack Herrington to examine it and focus on the React Redux 8-specific modifications that need to be made.
You can also use one of the example applications from the official React Redux tutorials or any of the example Code Sandboxes associated with the React Redux docs. You can even work with an existing React Redux app that you want to update to check for the changes.
The to-do app is developed using React 17 and Redux 8, so we are going to update to the newest version of these packages.
If you want to add React Redux 8 to an existing React app, you need to run the following command with npm:
npm i react-redux@next
Use the following command if you’re using yarn:
yarn add react-redux@next
Use this command to upgrade the app’s React version to React 18:
npm install react@rc react-dom@rc
React 18 comes with a new root API, createRoot, and runs updates more efficiently. The older API, ReactDOM.render has been deprecated.
Here’s how you can use it:
Go to the index.tsx file in the src folder of the apps and select the below-given block of code:
ReactDOM.render(
,
document.getElementById(‘root’)
);
Then, replace the code with the following block of code:
const root = ReactDOM.createRoot(
document.getElementById(“root”) as HTMLDivElement
);
root.render(
After that, go to your tsconfig.json file and add the below line:
{
“compilerOptions”: {
…,
“types”: [“react/next”, “react-dom/next”]
},
…
}
Now, your application will run the new root API, createRoot, making the enhancements in React 18 version accessible to your app.
Since React 18 comes with both the legacy root API and the new root API, you can choose the new one if you want to leverage the performance improvements it offers.
However, if you use the older API, you will get the deprecation message suggesting the new API.
If you want to upgrade React Redux to the 8th version, you need to execute the following command:
npm i react-redux@next
If you use Yarn, you need to add the following:
yarn add react-redux@next
Examining Any Breaking Changes
Now the app is working with React Redux 8. If you want to run the application and check any breaking changes and unexpected behavior, you need to run the below command:
npm start
After that, navigate to http//localhost:3000 in your browser. When investigating, we see that the to-do applications work optimally.
You can update the UI by filling the text box and clicking the Add Todo button. When you click on the Remove button beside an item, it gets deleted.
So we see that there are no breaking changes or unexpected behavior since all the changes made are not so impactful, with the public APIs remaining the same – connect and useSelector.
Hence, this new version has the same functionalities as the older one. The only way you can upgrade your application to React Redux 8 is to crash the package version.
You can always hire ReactJS developers from us if you need help with the version upgrade.
Significant Changes in React Redux 8
1. Code Translation into TypeScript
Older versions of React Redux (7 and previous versions) were built using plain JavaScript. If you want to use TypeScript with the previous versions, the types must be imported from another, community-managed package, @types/react-redux.
In React version 8, all the types are imported into the main package, which eliminates the need for the @types/react-redux package.
If you update to React Redux 8 and your application uses the @types/react-redux package, you need to get rid of that package.
2. Compatibility with React 18
In the latest version 8, React Redux’s two public APIs namely connect and use Selector have been rewritten to support React 18.
useSyncExternalStore is one of the new APIs that is shipped with React 18. This allows developers to access new features like choose support for concurrent rendering and automatic render batching.
React Redux’s connect and useSelector is reworked to internally call this new API.
3. Updated Build Output
Modern JavaScript generates small files and performs faster. However, since older browsers like Internet Explorer 11 are only supported by ES5 and not the latest versions, the older versions of React Redux compiled to ES5 to run on Internet Explorer 11.
As Internet Explorer 11 is no more functional, React Redux compiles to ES2017 leverages some built-in support in modern web browsers, and builds very small bundles.
To receive support for legacy browsers, you need to compile your own dependencies.
Eliminated Obsolete Legacy APIs
The introduction of Hooks has made React redux’s connectAdvanced API quite irrelevant as it only increases the package’s complexity. Therefore, version 8 has eliminated this in version 8.
Another legacy code that is no longer used is connect’s pure option. As React has evolved with tie, the pure flag, like the connectAdvanced API, has become unnecessary. It has also been removed in version 8.
New Features in React Redux 8 and React 18
1. Automatic Render Batching
Batching is done when several state updates occur at a given time and their response rendering occurs simultaneously. With an older React version, this only occurred when the trigger is a normal function.
If several state updates are triggered by a callback or promise, their responses are not rendered in parallel. In React 18, automatic render batching is done, which means they will occur at the same time, irrespective of their triggers.
2. Server-side Rendering
Using Suspense, React 18 makes significant performance improvements to server-side rendering (SSR) by making serving elements of an application asynchronously possible.
SSR allows you to produce HTML texts from the React components served. After this, the JavaScript code loads and combines with the HTML, also known as hydration.
The Suspense allows you to split your application into small, individual components that can be rendered independently without the rest of the application. This makes the content available to your users much faster than ever before.
Let’s say, for example, there are two components, a text component, and an image component. If you place them on each other as follows:
After this, the server caters to your text component first, and a spinner is displayed while your image is waiting to load.
3. Transitions
React-based applications are interactive. However, if you want that your app gets updated simultaneously as your users interact with it, this regular updating can significantly slow down your application and deliver a bad user experience.
With the startTransition API, you can prioritize urgent updates over secondary ones. This allows secondary updates to shift to the background or be skipped if they are no longer required.
Final Note
Your legacy React Redux apps are expected to work optimally if you upgrade them properly. Unfortunately, if you face any breaking changes or unpredicted behavior, the Redux team is obtaining feedback here to eliminate any issues before the release of the final version
If you need to upgrade to React 18, you can hire our wide range of ReactJS development services and solutions.
As a leading ReactJS development company, we have a team of seasoned ReactJS developers who can fulfill your application update requirements within the shortest timeframe. Get in touch with us to discuss your requirements today!
FAQs
Q.1. What does ReactJS use to boost performance?
Ans. ReactJS uses Virtual DOM to improve performance.
Q.2. What are hooks in React?
Ans. Hooks were introduced in React 16.8. They allow you to use state and other React features without writing a class. Hooks are also backwards-compatible.
Got More Questions? Feel Free to Ask Our ReactJS Experts