Upgrading to React 17: How to Fix the Issues and Breaking Changes

January 14, 2021 ,
React logo

React 17 mostly focused on under the hood changes that will make it easier for consumers to gradually upgrade in the future. There were no new features and the breaking changes, in theory, affected few consumer components. While upgrading at Wealthfront was certainly more straightforward than past versions, we still had a few issues to overcome. Since React 17 is still relatively new, we thought it might be helpful to share these blockers we came across and how we resolved them.

Updated React event handlers

In version 17, React changed the onFocus and onBlur handlers to use the focusin and focusout DOM element events (as opposed to focus and blur previously). This caused issues for us in two places.

First, jsdom <16.3.0 only fires focus and blur events when element.focus() and element.blur() are called. This is in contrast to modern browsers which fire focusin and focusout in addition. While this was resolved in 16.3, that’s still a relatively new version and we hadn’t upgraded yet. For us, jsdom was a transitive dependency of jest and involved upgrading to jest 26.5.0. React Testing Library relies on these methods for its testing helpers, so if you use that tool (which we highly recommend) you may run into these issues as well.

Second, we also had some legacy test helpers that used focus and blur events when filling out forms and other tasks. This was a simpler fix to add triggers for focusin and focusout to those helpers as well.

Storybook

Another tool we use (and recommend) that had some issues during the upgrade was Storybook. Storybook 6.1 is compatible with React 17, but we were still using 6.0 which is not. Upgrading to 6.1 involved updating our webpack and babel configs a bit, specifically updating our @storybook/source-loader rule in webpack to only run on .stories.tsx files and adding the loose parameter to babel-plugin-proposal-class-properties in our babel config.

Relying on React internals

At Wealthfront, we also have some custom logic that handles propType errors. They do this by checking the error message, which previously contained 'Invalid prop|Failed prop type'. There were some changes to the error message behind the scenes and they’re now formatted from parameters, so we needed to add 'Failed %s type' to our logic as well.

We also had one test that mocked performance.now() and relied on returning specific values for the first and second call. It seems React now calls this method under the hood though, and our mocks stopped returning the correct value. This was a simple fix to use and mock a performance helper method instead, but it’s worth noting in case you are also relying on these mocks.

Peer dependencies

And finally, let’s touch on peer dependencies. While none of our dependencies (other than those mentioned above) seemed to break when we upgraded to React 17, many of them have peer dependencies on React 16. And the majority don’t have recent versions available that upgrade that dependency to include 17. While this likely isn’t a major issue, it does litter the console with peer dependency warnings that may make it harder to spot other missing or outdated dependencies that actually might cause trouble.

Summary

Upgrading to React 17 was relatively straightforward, although we did come across a few issues during the process. While most were pretty simple to resolve, we did spend a decent amount of time debugging a few of the issues. Hopefully sharing what we came across and how we dealt with it can help minimize some of that debugging time for you!

And as always, if you found this post helpful and want to come work with us, check out our Wealthfront careers page for current opportunities.


Disclosure

This communication has been prepared solely for informational purposes only.  Nothing in this communication should be construed as an offer, recommendation, or solicitation to buy or sell any security or a financial product.  Any links provided to other server sites are offered as a matter of convenience and are not intended to imply that Wealthfront or its affiliates endorses, sponsors, promotes and/or is affiliated with the owners of or participants in those sites, or endorses any information contained on those sites, unless expressly stated otherwise.

Wealthfront offers a free software-based financial advice engine that delivers automated financial planning tools to help users achieve better outcomes. Investment management and advisory services are provided by Wealthfront Advisers LLC, an SEC registered investment adviser, and brokerage related products are provided by Wealthfront Brokerage LLC, a member of FINRA/SIPC.   

Wealthfront, Wealthfront Advisers and Wealthfront Brokerage are wholly owned subsidiaries of Wealthfront Corporation.

© 2021 Wealthfront Corporation. All rights reserved.