Eslint-plugin-react: functional setState shows `no-unused-state`.

Created on 19 Feb 2018  路  5Comments  路  Source: yannickcr/eslint-plugin-react

version: 7.6.1

state = {
    removeQueue: [],  <--- unused state field: 'removeQueue'
}
onUpdate = (date, id) => {
    this.setState(prevState => ({
      removeQueue: [...prevState.removeQueue, { date, id }],
    }));
  }

I'm using removeQueue in functional setState, but eslint shows error.Unused state field: 'removeQueue' (react/no-unused-state)

I also maked onUpdate a constructor-bound instance method as @ljharb said.

constructor() {
    super();
    this.onUpdate = this.onUpdate.bind(this);
  }

onUpdate(date, id) {
    this.setState(prevState => ({
      removeQueue: [...prevState.removeQueue, { date, id }],
    }));
  }

But it shows me same result..

bug help wanted

Most helpful comment

We are getting bit by this too. Here's my minimal example to reproduce:

// index.js

import React from 'react';

export default class MyComponent extends React.Component {
  constructor() {
    this.state = {used: 1, unused: 2};
  }

  componentDidUpdate() {
    this.setState(({unused}) => ({
      used: unused * unused,
    }));
  }

  render() {
    return <div>{this.state.used}</div>
  }
}
// package.json

{
  "name": "test",
  "eslintConfig": {
    "parserOptions": {
      "ecmaVersion": 6,
      "sourceType": "module",
      "ecmaFeatures": {
          "jsx": true
      }
  },
    "plugins": ["react"],
    "rules": {
      "react/no-unused-state": "error"
    }
  },
  "dependencies": {
    "eslint": "^4.19.0",
    "eslint-plugin-react": "^7.7.0"
  }
}

Error: Unused state field: 'unused' (react/no-unused-state)

All 5 comments

We are getting bit by this too. Here's my minimal example to reproduce:

// index.js

import React from 'react';

export default class MyComponent extends React.Component {
  constructor() {
    this.state = {used: 1, unused: 2};
  }

  componentDidUpdate() {
    this.setState(({unused}) => ({
      used: unused * unused,
    }));
  }

  render() {
    return <div>{this.state.used}</div>
  }
}
// package.json

{
  "name": "test",
  "eslintConfig": {
    "parserOptions": {
      "ecmaVersion": 6,
      "sourceType": "module",
      "ecmaFeatures": {
          "jsx": true
      }
  },
    "plugins": ["react"],
    "rules": {
      "react/no-unused-state": "error"
    }
  },
  "dependencies": {
    "eslint": "^4.19.0",
    "eslint-plugin-react": "^7.7.0"
  }
}

Error: Unused state field: 'unused' (react/no-unused-state)

the same problem +1

Same problem here. Not sure what else I could provide as insight...

What's needed now is a PR.

+1, error happens on destructing like @lemonmade commented.

Was this page helpful?
0 / 5 - 0 ratings