How to Remove Unused Dependencies in React

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.

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.

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:

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

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:

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

Run depcheck again.

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

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

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

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.

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.

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.

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

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

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

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.

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

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

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.

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.

Explore these React and Bootstrap courses from Pluralsight to continue learning:

• React Course
• Bootstrap Getting Started
• Bootstrap for Developers