DEV Community

loading...
Cover image for Upgrading to React 17

Upgrading to React 17

keonik profile image John Fay ・3 min read

New Release

As with any major release, there are typically breaking changes. Although the changelog for React states "No New Features" there are a few. The TLDR for this is a preparation for the next version to resolve any issues they foresee in migration to the next major version. I'm going to highlight some changes with React and Create React App that will clean up code and increase some efficiency

JSX transform

Plenty of posts have already summarized this so I'm not gonna spend too much time on this. TLDR:

New Benefit Problems it solved
No longer need to import React from 'react' JSX is understood by all files compiled below the root, possibly slightly smaller bundle sizes, and enabled future releases

Fast Refresh

react-refresh is the successor for react-hot-loader. For some time, hot loading in react has been a great developer experience where we can keep our frontend application running and it will refresh when the changes are detected. What react-refresh does is a step further. If you are someone who builds client-side rendered applications and pass around a lot of state management in tools such as react context, redux, apollo, or really any react hooks, changes to your code no longer do a complete page refresh! It stores many of those changes and updates only the changes being made. My coworkers and I will love this because we have quite a bit of complex state management being passed around so we no longer lose our place when we want to make a minor JSX change! Here's a preview

Fast Refresh

Notice the changes to the return JSX and the imports and it still stores state. Get excited! I am!

Migrating an unejected Create React App project

Install updated packages

npm install react-scripts@4.0.0 react@17.0.0 react-dom@17.0.0
Enter fullscreen mode Exit fullscreen mode

Remove old installation and version lock file

rm -rf node_modules package-lock.json
Enter fullscreen mode Exit fullscreen mode

Although this isn't necessary if you run into any odd eslint related errors I found doing a clean install removed quite a few for me

Reinstall

npm install
Enter fullscreen mode Exit fullscreen mode

Rebuild

npm run build
Enter fullscreen mode Exit fullscreen mode

This is really only applicable to typescript projects. There is a flag that you'll see get set and after that...

Restart your app

npm run start
Enter fullscreen mode Exit fullscreen mode

Potential issues others are running in to

Since create-react-app updated their eslint setup you may see some errors thrown that are new. I just spent the time to understand them and resolve them as I see fit. Some of the rules such as import order we're incorrect because I was using a relative import plugin. If you run into any other problems look for an existing issue or create your own here

Other issues

If you find an issue that hasn't been captured by the Facebook Create-react-app team here be a good open-source developer and create an issue. I had one where I was referencing an image under my public/ directory in a sass file to use as a background-image:... reference when myself and others realized the public directory is no longer available. Read more on this issue here

Migrating other projects

For most cases, you still would install the updates

npm install react@17.0.0 react-dom@17.0.0
Enter fullscreen mode Exit fullscreen mode

After that, you would look up your specific platform. Both webpack and babel have plugins to help with the fast refresh and JSX transform config. If you're using other setup's such as react-app-rewired or NextJS refer to their documentation to lookup how others are migrating. It's less common so I am not going to be able to stay up-to-date with the latest way to migrate.

That is all folks. Thanks for tuning in

Discussion (13)

pic
Editor guide
Collapse
sesamechicken profile image
sesamechicken

Sadly we’re still waiting for the react 17 enzyme adapter. If you’re not - shame on you for not testing your code! 🤪

Collapse
wojtekmaj profile image
Wojciech Maj • Edited

You can use @wojtekmaj /enzyme-adapter-react-17 while you're waiting for an official adapter :) Works perfectly for me so I've decided to share it with the community!

Collapse
keonik profile image
John Fay Author

Would you still need that if you’re using testing-library/react?

Collapse
sesamechicken profile image
sesamechicken

My guess is no, as you’re not dependent on enzyme. But, I’d have to stand up a test project or look at the testing-library repo

Thread Thread
keonik profile image
John Fay Author

I switched from enzyme to testing-library about a year and half ago. I honestly don’t remember enzyme much already. I do enjoy testing library’s access methods.

Thread Thread
sesamechicken profile image
sesamechicken

I should take a look! I primarily stick with jest because the test suites behave and are constructed for front end and back end (node) code.

Thread Thread
keonik profile image
John Fay Author

It’s still jest. It’s just an alternative for rendering components to enzyme. Yeah try it out!

Collapse
kamalhossain profile image
Kamal Hossain

How important the testing is for react? Many small companies not doing that, is that a mistake they are making?

Collapse
sesamechicken profile image
sesamechicken

I think if you’re not testing your code, you’re opening yourself to avoidable mistakes, bugs, and regression issues. It also makes it near impossible to collaborate with others on large scale projects.

Thread Thread
kamalhossain profile image
Kamal Hossain

I am working on react and react-native projects around 1 year. I have tried to learn testing with jest and ezyme. But sadly I haven't found friendly tutorial for them. I think the resource for testing react is less available then learning the react without testing.

Thread Thread
sesamechicken profile image
sesamechicken

I can definitely help! There’s probably posts on here covering the topic or I could write something.

Thread Thread
kamalhossain profile image
Kamal Hossain

It would be very much appriciateable, thank you in advance.

Collapse
octsiri profile image
Dominggus Octovianus

Hi all, who has experienced flow server keeps stopping working while upgrading React 17? Even after I upgrade my flow version to 0.126.0, it stills the same. :(