If you haven’t already heard, the big news over the past fortnight is that React 16 was released.

Now I don’t want to waste your time with another “What is React 16?”; the official blog is already very informative. But what I can give you is the story of my experience this week, when I upgraded a large project to React 16.

The short version

If you have a React 15.5 app which doesn’t use deprecated features and doesn’t throw errors, then React 16 just works!

Of course, “it just works” doesn’t make for a very interesting story. So lucky for you, it didn’t just work for me.

Deprecations

One of my favorite things about React is that it gives me access to a great library of open-source components. And thanks to the stability of React’s API, I haven’t needed to upgrade many of these components… until now.

React 16 no longer exports React.createClass, React.PropTypes, or React.DOM. These were deprecated in React 15.5, but now they don’t work at all.

You can still use these by adding the appropriate package to your project. Unluckily for me, my app depended on some unmaintained packages that still accessed React.PropTypes, so I took the opportunity to find alternatives. This was the only really painful part of the upgrade.

Error handling

In previous versions of React, throwing exceptions within event handlers would have unpredictable results. Sometimes, things would carry on as expected. Other times, the application would become unusable.

React 16 is more consistent. Unhandled exceptions are guaranteed to make the application unusable.

Thanks to this change, the upgrade revealed a number of exceptions that had previously been occurring, but had gone unnoticed.

Of course, React 16 also gives you a great new way of handling exceptions — the componentDidCatch lifecycle method. I haven’t had time to find out the best way to use this yet, but I’d love to hear from you if you have!

Breaking changes, but not really

While React’s API hasn’t changed much, it has an entirely new engine under the hood called React Fiber. And because of this, there are a few very minor breaking changes.

These changes are unlikely to affect you. But it is still a good idea to take a look at the list; if nothing else, it’ll show you just how serious the React team takes stability.

And actually, one of these changes did affect me. By changing when setState callbacks are called, React 16 actually made it possible for me to complete an idea that I’d been toying with, but which wasn’t possible with previous versions.

But this update is already too long, so I’ll share the details with you in the future!