React 18 is out! What's good about it?

TL;DR - What's new with React 18?

React 18 has been released a few weeks ago and people had the chance to try the new changes. Someone had to deal with problems on the useEffect hook but that's mainly caused by the new "concurrent mode" that React 18 brings with it's new major versioning.

React 18 is out

React 18 has finally shipped and sailed the seas of change in the mare magnum of all libraries on NPM. The team behind React has been very friendly on the adoption side of the new version, allowing users to opt in on any new feature the library brings on.

Gradual adoption being of the uttermost importance, let's see what's new and what's troubling about this new release and most importantly, how we can break production code without even trying!

Alright, so you want to upgrade your React installation because all the cool kids are using the new Concurrent Mode and, although you have no idea what that's all about, you still wanna play with it.

# You can also avoid specifying the @18
npm i react@18 react-dom@18

And also, if you are migrating an existing React project from version 17 (or prior to that) to version 18, you should take care of the entry point of your application.

// Old way, prior to version 18
ReactDOM.render(<App />, document.getElementById('root'))

// New root binding, this is for version 18 if you want to upgrade
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<App />)

Not so much of a difference here, just a few changes and you're set to go.

I love how the React blog clearly states that their best addition to the library is something they hope you'll never have to think about. Makes a lot of sense to me. That's good engineering.

All the fuss around React Concurrency and all you actually need to know to start using it is just:

1. Upgrading to version 18
2. Do the same stuff you used to do before version 18

Concurrency in React 18 can be thought of a new invisible mechanism that works behind the scenes and just works.

What it does is it prepares multiple versions of your amazing and well engineered UI (who are we kidding) and it does so, well, concurrently, thus allowing for a boost in performance without you doing actually nothing but leaving you with all the bragging that comes with performance boost.

With Concurrency being the most important under-the-hood boost for this library, there are also quite a few interesting additions that one might care about.

New Hooks in React 18

React 18 comes with a series of useful hooks that you might consider pretty much as utilities to grunt some work and offload you from installing third-party dependencies.

useId is a hook that brings uniqueness in generating random IDs both on client and server side React.

useTransition can set updates as not urgent allowing React to schedule state updates accordingly, boosting performance.

There are also useDferredValues, useSyncExternalStore and useInsertionEffect which appear to be low level and a good entry point for future adaptations by libraries. For more informations you can read about those hooks here

React 18 Strict Mode

With React 18 also comes a double rendering of components which is actually not as true as it seems. React 18 has introduced a new dev-only check that whenever a component gets mounted it will get unmounted and remounted.

You will not lose state or anything and it actually gets stripped during production build.

So what's about it?

Well, some usecases are being broken by this, like the empty dependency array trick to simulate the componentDidMount cycle.

What people are doing to solve this "issue" is to create a ref to integrate with the previous behavior, what people should be doing instead is to avoid leaving the dependency array empty as it will always be dependent on something, even something that doesn't change.

A beautiful article from Dan Abramov has a great explanation on the mental model behind useEffect.

But if you want to keep the dependency array empty and continue with the almost similar componentDidMount life cycle, take a loot at this article from AG Grid. You should know that this is just for development purposes only so you can probably not care about it and use React as you always had.

The goodbye

I hope you found this article useful and to your liking and if you have any requests, drop a message on one of my social media accounts or open an issue/start a discussion on github, on this repository!

As always you can find me on Twitter, listen to my Podcast on Spotify and add me on LinkedIn to talk professionally (yeah, right)

Interesting? You might also like: