How to find dead code in a large react project?

Question

In order to refactor a client-side project, i'm looking for a safe way to find (and delete) unused code.

What tools do you use to find unused/dead code in large react projects? Our product has been in development for some years, and it is getting very hard to manually detect code that is no longer in use. We do however try to delete as much unused code as possible.

Suggestions for general strategies/techniques (other than specific tools) are also appreciated.

Thank you

Answer 1

First of all, very good question, in large project coders usually try many lines of code test and at the end of result, hard to find the unused code.

There is two possible that must be work for you - i usually do whenever i need to remove and reduce the unused code into my project.

1st way WebStorm IDE:

If you're using the web-storm IDE for JS development or React JS / React Native or Vue js etc it's tell us and indicate us alote of mention with different color or red warning as unused code inside the editor

but it's not works in your particular scenario there is another way to remove the unused code .

2nd Way unrequited Library:

The second way to remove the unused code inside the project is unrequited library you can visit here : unrequited github

another library called depcheck under NPM & github here

Just follow their appropriate method - how to use them you will fix this unused issue easily

Hopefully that helps you

Answer 2

My approach is an intensive use of ESlint and make it run both on IDE ad before every push.

It points out unused variables, methods, imports and so on. Webpack (which has too nice plugins for dead code detection) take care about avoiding to bundle unimported code.

Answer 3

I think the easiest solution for a create-react-app bootstrapped application is to use ESLint. Tried using various webpack plugins, but ran into out of memory issues with each plugin.

Use the no-unused-modules which is now a part of eslint-plugin-import.

After setting up eslint, installing eslint-plugin-import, add the following to the rules:

"rules: {
  ...otherRules,
  "import/no-unused-modules": [1, {"unusedExports": true}]
}