Turn off error for unused variables during React Development

Introduction

If you are just starting development with React then we see this error multiple times when there is unused local variable in source code. Error looks something like as shown below. Here, I have highlighted error to make it more clear.

React unused variable error
React unused variable error

Why is it happening?

This error happens because we have told our JS compiler to report as such. In project root directory you might have tsconfig.json or jsconfig.json depending on whether you are using typescript or javascript.

In my case, I am using Typescript so I have tsconfig.json file. Read more about tsconfig.json here.

In your IDE, open tsconfig.json file which will look something like this.

[sourcecode language=”json”]{
“compilerOptions”: {
“baseUrl”: “src”,
“target”: “es5”,
“lib”: [
“es6”,
“dom”,
“dom.iterable”,
“esnext”
],

“isolatedModules”: true,
“noEmit”: true,
“noUnusedLocals”: true,
“noUnusedParameters”: true,
“rootDir”: “src”,
// more settings here
},
// more settings
}
[/sourcecode]In this file, you will find config “noUnusedLocals” in “compilerOptions”. If you have error this will probably contain “noUnusedLocals” set to “true”. This is the reason we have compiler throwing error for unused parameter or local variable. By default, it’s value is “false:.

[sourcecode language=”javascript”]{
compilerOptions: {

“noUnusedLocals”: true,

}
}[/sourcecode]

How to solve it?

To turn off reporting error for unused locals, we can set it to false manually and save tsconfig.json. Then make changes on react component file and reload it. The error should disappear. However, you’ll still get warning about unused local variables in react development console. My personal preference is to keep console clean whenever possible.

React development console
React development console

If you are still confused then we can discuss more about it in comments. Happy React Development. You can follow me on twitter. I am @samushr on twitter and @samundra on github.

2 Replies to “Turn off error for unused variables during React Development”

Comments are closed.