Updating React to Newer Versions

Written by Tinjure WP Posted on

ReactJs, just like other software libraries, is constantly in development to patch securities, update dependencies and add new features. To take advantages of the new features, the core ReactJs library needs to be updated when available.

In this posts updating ReactJs to newer version using npm and Yarn is described briefly.

Updating React v16.8 with Hooks

React Doc lists Installation instruction from npm registry.

Step 1: Issue following codes from the root folder

#! from root folder
npm install --save react@^16.8.0 react-dom@^16.8.0

Once update has successfully completed expect following message in the terminal

#! console message
+ react@16.8.0
+ react-dom@16.8.0
added 7 packages from 3 contributors and audited 24 packages in 7.568s
found 0 vulnerabilities

It can also be updated using Yarn & we get same result.

#! using yarn
yarn add react@^16.8.0 react-dom@^16.8.0

Step 2: Run the following code from the terminal to update dependencies

#! update dependencies
npm update --save

If successful following message will be displayed

#! dependencies update console
+ react-dom@16.8.1
+ react@16.8.1
added 2 packages, updated 2 packages and audited 36 packages in 2.491s
found 0 vulnerabilities

With Yarn, use the following command to upgrades packages to their latest version.

#! Yarn update
yarn upgrade

Additional Information: React v16.8: The One With Hooks | React Blog

Step 3: Installed React version can be verified with <a href="https://yarnpkg.com/en/docs/cli/info" target="_blank" rel="noopener">Yarn info</a> command

#! yarn info
yarn info react
#!OUTPUT
.....
 license:
   'MIT',
  version:
   '16.8.2',
.....

Step 4: Print Out Current Version in App

Currently running version of React App can be displayed as follows:

//app
import React from 'react';
import { render } from 'react-dom';

const App = () => (
  <div>
    {
      process.env.NODE_ENV === 'development' ?
        <p>Currently using React {React.version}</p> :
        <p>It's a secret if you're in production.</p>
    }
  </div>
);

render(<App />, document.getElementById('root'));

The above script will output current version of react running.

Useful Reference

Note: This post cross posted in JS Blog sites too.