Upgrading to React 17 and Webpack 5

Generally, as developers, we think twice before upgrading a project to the latest versions because there could be breaking changes, dependency issues, depreciation warnings, etc. Therefore, let’s get a basic understanding of the impact of upgrading to React 17 and Webpack 5.

React 17

Although there are no significant features in this version, it sets the foundation for gradual React upgrades for the future.

Therefore, when you upgrade from React 16 to 17, you must upgrade the whole project at once.

However, from React 17 onwards, there will be two upgrade options. Hereafter, you can decide to upgrade the entire project at once or in parts to the latest version. Most importantly, you don’t need to worry about breaking changes.

Gradual updates or quite simply, being able to use more than a single version of React components in the same web app, is now more important than ever. React components are often shared from React projects to Bit, to be reused on other projects. Being able to use components of different React versions could make a lot of difference — especially if these “components” are full-pages or widgets that make up an independent micro-frontend.

Besides, there are many other changes in React 17 like New JSX Transform, Effect Cleanup Timing, Native Component Stacks, and you can find more about those in their documentation.

Webpack 5

Almost after 2 years of silence, the Webpack team have released their latest version as Webpack 5. The good news is that you can find many exciting features that mainly focuses on;

• Improving build time with persistent caching.
• Reducing bundle size.
• Long term caching.

Also, Webpack 5 comes with some breaking changes.

Having to deal with breaking changes is always a bit annoying. However, I feel it’s essential to upgrade your projects to Webpack 5 sooner than later.