Upgrading to React18 is easy

We read that a lot of people and companies are having issues with the migration from a previous version of React library to the latest version, the React18, and we thought it would be hard to upgrade our micro frontend applications from React16 to React18, with RecoilJS and all the tests.

It turns out that no, it was not that hard, actually it was pretty easy!

We did it fast, without breaking anything, migrating the whole application to the latest react, recoil and testing library version without experiencing any issues.

In this article we are going to analyze the actions that we took in order to get an easy migration to a newer version of the library.

What’s really new in React18?

React-dom API is changed, this is the fastest answer to the question.

This article is not meant to be an in-depth journey into React18, because a lot of things were limited or deprecated before this version came out, and the other features provided just small changes (such as renderToPipeableStream or useEffect or StrictMode).

Of course, we are reflecting all of these changes from our point of view (react16 codebase), where we are already using functional components for an easier usage of the hooks such as useEffects.

Migrating to React18 in few easy steps

Again, this is our personal experience, it might be different for others or in other environments.

First of all we needed to clean all the old dependencies and check for security issues for the others via npm audits. It’s always about the node modules.

After this “pre-hook”, we verified the official React changelogs, then upgraded the React package and started to get the errors we planned to see, such as the ReactDom package that changed its API:

Even in the test env as it follow:

By analyzing these errors we changed the deprecated render method and also updated the testing-library/react in order to still get unit test run successfully.

Since we were already using functional components, the useEffects minor changes didn’t affect us, but we added the newest StrictMode to verify that (it’s available only in dev mode).

Another major change in this React version is related to the Suspense usage and its tree, that is now always consistent. We were not experiencing any issues.

Lastly, we needed to upgrade RecoilJS to the latest version in order to support the latest React version, otherwise the App would crash as soon as it got the first state.

And here it was, our migration was complete.

We needed to upgrade these few things to get our migration process done for all our micro frontends applications.

This process was made easy by our foresight in bringing the latest version of the packages that we were using, without any fear under any respect, e.g. time, effort or boring stuff that needed to be done.

Takeaways: always manage to upgrade your dependencies and approaches

As I said, we were migrating from a codebase in React16.

How many of you are updating their dependencies any time a new major version is released?

A good way to reduce the effort and hard times during migration is to schedule an “upgrade task” during the sprint as a tiny workload, in order to avoid a bulk upgrade that may lead into a huge waste of time.

Of course, we need time to make the updates but it’s more under control to update a few things instead of a full codebase.

“Yeah, ok, but my manager/PM does not let me schedule these maintenance tasks!”

Unfortunately, I heard a lot of people experiencing this issue. Speak to your manager in order to let him/her understand the importance of being up to date with your tech stack, also for security reasons.

“I hate upgrading or auditing my dependencies, it’s boring and very hard to accomplish!”

This feeling should not exist in a good environment.

Sure, it’s not fun to audit and update dependencies, but it’s part of our job and our responsibilities.

Be a better developer, upgrade your deps.