Author avatar

Gaurav Singhal

How to Remove Unused Dependencies in React

Gaurav Singhal

  • Jul 28, 2020
  • 8 Min read
  • 170 Views
  • Jul 28, 2020
  • 8 Min read
  • 170 Views
Web Development
Front End Web Development
Client-side Framework
React

Introduction

React focuses on using external dependencies for development. These dependencies are reusable react components imported as npm packages. However, projects that have too many dependencies hinder performance on low-end devices and less powerful systems. To combat this, it is imperative to track unused packages in your project and eventually remove them. This guide tells you how to do this using some simple tools without manually tracking down each file in your project looking for unused packages.

Impact of Using Dependencies

Using dependencies in a project serves a lot of purposes. First, it helps to carry out complex tasks easily and efficiently by giving you tools and methods right out of the box. Second, it keeps code clean, short, and readable, which mitigates the problem of someone else having a hard time understanding your code. Lastly, it saves a considerable amount of development time.

However, abusing the liberty to use dependencies in your project can cut down the performance of your app significantly. You can unknowingly add tons of unnecessary lines of code, leading to a larger bundle size. The most common situation where this occurs is when you install an npm package because the project demanded it at one time but later didn't use it, and forgot to remove it manually. For instance, if you're developing the frontend of an application and you decide to use bootstrap in your React app but later decide you should use material-ui instead, you might forget to uninstall bootstrap from your app. As the app becomes larger and more complex, it gets difficult to keep track of unused dependencies and remove them manually.

Using depcheck to Track Dependencies

depcheck is a tool that analyzes dependencies by using the information provided by npm inside your React app's package.json file. It helps to identify which npm packages are being utilized in your app and which are not.

In an empty React project, install depcheck by running the following command:

1
npm install -g depcheck 
shell

This installs depcheck globally on your system. Next, run the following command inside your folder where you want your dependencies to be checked.

1
depcheck
shell

Ensure that this folder contains the package.json file, otherwise depcheck will not be able to track your dependencies. You will mostly need to run this command in the root directory of your project.

Running it for an empty React project gives the following output:

1
2
3
4
5
6
7
8
9
10
Unused dependencies
* @testing-library/user-event
Missing dependencies
* eslint-config-react-app: .\package.json
* babel-eslint: .\package.json
* eslint-plugin-import: .\package.json
* eslint-plugin-flowtype: .\package.json
* eslint-plugin-jsx-a11y: .\package.json
* eslint-plugin-react: .\package.json
* eslint-plugin-react-hooks: .\package.json
shell

Thus, depcheck separates the list of unused dependencies from others. To understand how it works, install react-bootstrap.

1
npm i react-bootstrap
shell

Run depcheck again.

1
depcheck

Since you only installed the react-bootstrap package and did not import anything from it, depcheck shows it as an unused dependency.

1
2
3
4
5
6
7
8
9
10
11
Unused dependencies
* @testing-library/user-event
* react-bootstrap
Missing dependencies
* eslint-config-react-app: .\package.json
* babel-eslint: .\package.json
* eslint-plugin-import: .\package.json
* eslint-plugin-flowtype: .\package.json
* eslint-plugin-jsx-a11y: .\package.json
* eslint-plugin-react: .\package.json
* eslint-plugin-react-hooks: .\package.json
shell

If you import a react-bootstrap component inside App.js ...

1
import Button from 'react-bootstrap/Button';
react

... and run depcheck again, it no longer shows react-bootstrap under unused dependencies.

1
2
3
4
5
6
7
8
9
10
Unused dependencies
* @testing-library/user-event
Missing dependencies
* eslint-config-react-app: .\package.json
* babel-eslint: .\package.json
* eslint-plugin-import: .\package.json
* eslint-plugin-flowtype: .\package.json
* eslint-plugin-jsx-a11y: .\package.json
* eslint-plugin-react: .\package.json
* eslint-plugin-react-hooks: .\package.json
shell

This means that depcheck only checks for your imports and not the actual code.

You can also pass additional parameters using the following syntax for the command.

1
depcheck [directory] [arguments]
shell

The [directory] argument is the root-level directory of the project where package.json file is present. It defaults to the current directory if not specified. The [arguments] parameter can be used to customize the output.

Using npm-check to Track Dependencies

npm-check does a similar job of tracking dependencies but displays them in a more analytical and readably attractive manner. It uses color schemes to convey different information about an npm package being used in your app. Install it globally first by running the following command.

1
npm install -g npm-check
shell

Following on the previous section, import the Button component from react-bootstrap inside App.js .

1
import Button from 'react-bootstrap/Button';
react

Now run the following command for npm-check to analyze your dependencies.

1
npm-check
shell

This displays a vivid analysis of your packages on the command line and highlights unused packages by marking them as NOTUSED.

1
2
3
4
5
6
7
8
...
react-bootstrap NOTUSED?  Still, using react-bootstrap?
                Depcheck did not find code similar to 													require('react-bootstrap') or import from 												'react-bootstrap'.

                Check your code before removing as depcheck 											isn't able to foresee all ways dependencies 											can be used.
                Use --skip-unused to skip this check.
                To remove this package: npm uninstall --save react-bootstrap
....
shell

It also shows you which packages are outdated and incorrect, along with relevant commands to carry out what you need to do. It has an interactive UI for updating your modules to newer versions. You can try running it in any of your live projects to explore more features.

Uninstalling Packages Using npm uninstall

In general, you can uninstall any npm package or dependency by running the following command:

1
npm uninstall <package_name>
shell

Let's uninstall react-bootstrap from the project by running:

1
npm uninstall --save react-bootstrap
shell

The --save flag indicates that module record will be removed from package.json. If you use the command without the save flag, npm will remove the module record from package.json as well as the module folder from node_modules. In newer versions of npm, both commands essentially do the same thing.

npm-uninstall takes three optional flags to save or update your package version in package.json file.

  • The -S or --save flag indicates that the package will be removed from your main dependencies.

  • The -D or --save-dev flag indicates that the package will be removed from your devDependencies.

  • The -O or --save-optional flag indicates that the package will be removed from your optionalDependencies.

  • The --no-save flag indicates that the package will not be removed from your package.json file.

Conclusion

Using a dependency to track another dependency might sound odd, but it's the easiest and safest option on the go. Both depcheck and npm-check are small, and installing them globally does not add additional dependencies for your production build. Using them to cut down your React project's build size can give you great performance benefits and speed up your development process.

3