How to Detect and Remove Unused Dependencies in React

Omatsola
2 min readAug 11, 2022

--

Photo by Lautaro Andreani on Unsplash

React applications uses external dependencies for development, but having too many or unused dependencies can cause performance issues in our app over time

How to easily detect and uninstall dependencies from your react project

Too many dependencies in a project can hinder performance on
low end devices and less powerful systems as you can unknowingly
add tons of unnecessary lines of code leading to a larger
bundle size.

Sometimes we might install a particular package which we intend
to use, but along the line maybe we don’t need it anymore,
it is imperative to do a check on our dependencies and know
the ones we are not using an remove them from our project.

Doing a dependency check:

one way we can check our project to see all our dependencies
and the ones we are currently using and the ones we are not using
anywhere in the project is by using the package called npm-check
we can install this package using

‘npm install -g npm-check’ or ‘yarn add npm-check’.

‘yarn add depcheck’.

Then we run the command ‘npm-check’

After running this, it will give an analysis of all packages
in your project and state which ones are used, unused, the ones
that need update and the ones that has an error.

Then you can go ahead and uninstall or remove the ones that you
are not using by using the command:

Example, maybe we want to uninstall bootstrap we could run
‘npm uninstall — save react-bootstrap’

and that is how simple it is to save your project from having
random packages that you will not use.

--

--

Omatsola

Frontend Engineer | web & mobile app developer | writer