How to Update Version of All Dependencies in a React Project

Irakli Tchigladze Feb 02, 2024
  1. Update the React Version With Yarn
  2. Update the React Version With npm
How to Update Version of All Dependencies in a React Project

The number of JavaScript developers who use the React framework is growing every day. As time passes, the framework is evolving.

For instance, React Version 16.8 introduced hooks, which changed how we write and structure React components. To enjoy the best and latest features, you need to install the newest version.

Typically, React developers use many other libraries and the core React library. For instance, React Router is a separate library essential for building powerful applications in React.

All the external libraries, packages, and modules are necessary to run the application dependencies. There can be dozens or even hundreds of dependencies for every React project.

You can find a complete list of dependencies in the package.json file. These dependencies release new versions but updating them can be exhausting.

This article will look at ways to update all the dependencies in your package.json file at once.

Update the React Version With Yarn

To update all dependencies of the project with Yarn, you should open a command-line interface in the project’s folder and run the following simple command:

$ yarn upgrade

It will upgrade all of the packages to the latest minor version. Note that the yarn upgrade command doesn’t update the packages to their major version.

For instance, if the version of a hypothetical package is 15.0 and the new version 16.7 is available, the yarn upgrade command won’t update to the latest major version.

It will upgrade to the 15.8 version, assuming that it’s the latest minor version release.

To learn more about version numbers, read this guide.

To upgrade packages to their latest significant versions, you should use the following command instead:

$ yarn upgrade --latest

It’s a straightforward operation, but simplicity comes with a cost. If running a large project, automatically updating all packages to the latest versions is not a good idea.

Your project might be relying on APIs from a specific version of the package, which might change when the new version is released.

So installing the most recent version might break your application.

Update the React Version With npm

Most React developers use npm to update dependencies in their projects.

To update packages to their latest versions, you can use a utility called npm-check-updates.

It looks at your package .json file and updates every dependency to its latest versions. Of course, this comes with the same risks of compatibility we described above.

Here’s an example of how to use npm-check-updates:

$ npm install -g npm-check-updates
$ ncu -u
$ npm install

If you want to upgrade a library or any other package to a specific version, you can use the following command:

$ npm install --save react@16.0.0

It will update React to the version 16.0.0.

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn