score:3
This plugin does what you are asking for. However a word of caution.
https://www.npmjs.com/package/eslint-plugin-no-unused-react-component-methods
Currently it is impossible to simply have a parser that would check for unused component properties, because component properties can be called dynamically.
For example:
class Sample extends Component {
// Plugin falsely flags this as unused.
unUsedMethod() {
console.log('I am used dynamically');
}
render() {
// No way to parse dynamic function calls reliably
this['unUsedMethod']();
return 'Hello!';
}
}
It also wouldn't work with react-onclickoutside package, as it requires a function to be attached to the component, that is called by wrapping the component in a HOC. https://www.npmjs.com/package/react-onclickoutside
Still the plugin helped me find a few unused functions, so it is worth a try in my opinion.
First install the package: npm i eslint-plugin-no-unused-react-component-methods --save-dev
Add "no-unused-react-component-methods" to your eslint configuration in the plugins section:
{
"plugins": [
"no-unused-react-component-methods"
],
}
And add into the rules section
{
"rules": {
"no-unused-react-component-methods/no-unused-react-component-methods": 2,
}
}
So your config would look like:
{
"parser": "babel-eslint",
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": ["eslint:recommended", "plugin:react/recommended"],
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true,
"sourceType": "module",
"allowImportExportEverywhere": false,
"codeFrame": false
},
"sourceType": "module"
},
"plugins": [
"react",
"no-unused-react-component-methods"
],
"rules": {
"no-unused-react-component-methods/no-unused-react-component-methods": 2,
"indent": [2, 4, { "SwitchCase": 1, "ObjectExpression": "first" }],
"linebreak-style": ["error", "unix"],
"semi": ["error", "always"],
"react/display-name": 0,
"react/prop-types": 0, // Temporary
"react/no-unescaped-entities": 0,
"no-trailing-spaces": 1
}
}
Now it should highlight any seemingly unused functions! Let me know if it works or not.
Source: stackoverflow.com
Related Query
- Set eslint rule for unused class methods in React component
- eslint rule for preferring React Class Component syntax
- Why do I have to .bind(this) for methods defined in React component class, but not in regular ES6 class
- How do I create a class decorator for mixing new methods into a React component when using Typescript?
- TypeScript errors in React Class Component property does not exist on type 'Readonly<{}>', not sure how to set types for state
- Eslint - what rule is responses for highlighting wrong/undefined methods in React components?
- Set loading state before and after an action in a React class component
- Adding a click handler to React children for methods on the child component
- Using instanceof to test for base class of a React component
- ESLint rule for Object & array dependencies in the React useEffect Hook
- How to set display name for a React class (ES6)?
- React router activeClassName doesnt set active class for child routes
- Set default props for a react Component
- How to set two properties for a React component as optional depending on another property using TypeScript?
- how to use Context for class Component in other module in React js
- React "useViewBox" hook for SVG viewBox failing ESLint rule exhaustive-deps
- How to set a loading state for react component while sorting and filtering data?
- Is there a way to spy/mock using Jest on fat arrow class instance methods for React components?
- setting default value for react class component state in typescript
- React types files not working in React TypeScript (.tsx) file - Throwing ESLint errors for React Component
- React class component unusual this binding on methods
- How to set a class name for a div dynamically in react js
- How to set a state varibale for a dynamically rendered component in React
- Failed to set state for react functional component
- What is the equal code for OnChange on React Class Component , on React Function Component
- Set Time Interval for Fetching Data inside React Life Cycle Methods
- How to set max and min value for increment and decrement methods inside React
- Class properties for react lifecycle methods
- how to have set state for sibling component in React without updating
- Naming convention best practices to avoid eslint no-shadow rule in functional React component
More Query from same tag
- Javascript : When setState inside promise, getting an unending loop of output
- useAsyncStorage custom hook with useState hook in React Native
- How to reset the form after submit or after clicking on cancel button using formik
- How to load react component based on prop value
- React Context API Seems to re-render every component
- React Hooks Error: Hooks can only be called inside the body of a function component
- How to replace text with substitute that contains JSX code?
- How to process data received from an AJAX request in React
- add block-input from sanity.io to next.js blog post
- Import npm modules in client side React components
- Sorting object array by a property value
- how to send images through axios using gridfs?
- I have a data coming from the api how do I display it in tree form in react
- React DOM change component on window resize
- No Error so is why my component not rendering?
- why do not display in react?
- what's the difference between these two functions in react?
- How to create and deploy a React App properly?
- Trying to import a img in react
- redux state is not updating
- How to Use Select Multiple with Redux Form?
- At what nesting level should components read entities from Stores in Flux?
- How to update the input value when catching an onChange event in React?
- Parameters Routing
- How to recreate the code using Rendering solution
- change Component name with map function
- How to test Window.postMessage() in JEST?
- Share codebase using common Sdk module in create react app Reactjs application
- why my condition don't change the state in react js on submit?
- Check two variables in js switch case