In React 17, there is no need to add import React into each file. This is due to the advancements in the refresh mechanism in React. Rather than using the react-refresh mechanism (with react-hot-loader), React 17 now uses the Fast refresh feature.
The fast refresh feature has the following features:
- the component state is maintained between refreshes
- page reloads when errors are resolved
- the whole page reloads when data outside of the React tree is updated
Things that it doesn’t do:
- Fast refresh is for functional components only.
I purposely made that list item as it is quite a big point. Especially as many React developers will still be dealing with applications that share class and functional components.
So it is time to say goodbye to import react:
import react from 'React';
and hello to slightly less code in your components.
Your Feedback Is Welcome
While putting together posts and articles on React and other technologies, I want to create content that my readers find useful. For this reason, I’m asking readers to join me on Twitter or Mastodon (contact details at the end of the article) to give feedback, and suggestions or even just have a general chat about software engineering. I hope to see you there!
Remember to check out my other React articles here and follow me on Twitter/X here! And now, mastodon: @bernieslearnings@mastodon.social
Thanks for reading!
