question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

functional setState shows `no-unused-state`.

See original GitHub issue

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…

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:11
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

16reactions
lemonmadecommented, Mar 20, 2018

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)

0reactions
shermendevcommented, Oct 26, 2018

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

functional setState shows no-unused-state . #1697 - GitHub
I'm using removeQueue in functional setState, but eslint shows error. Unused state field: 'removeQueue' (react/no-unused-state).
Read more >
How do I avoid unused setState functions? Can React ...
setState is used when it's needed to be aware of the changes in the value stored in state. This way the component knows...
Read more >
Using a function in `setState` instead of an object - Medium
Components that contain local state have a property called state When we want to change our how application looks or behaves, we need...
Read more >
Using the State Hook - React
A Hook is a special function that lets you “hook into” React features. For example, useState is a Hook that lets you add...
Read more >
What is the second argument that can optionally be passed to ...
log function is getting called on the previous value of input field. It shows the asynchronous nature of setState. 2. Passing a second...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found