New Rule Proposal: `no-unnecessary-setstate`

[karlhorky]

Rule proposal: no-unnecessary-setstate - forbid setting state to the value of the existing state variable

I've seen this pattern also a bunch from beginners. And regardless of whether you're a beginner or not, this is probably not what you want to do (even if it's an object / array).

Example of incorrect code:

function Input (props) {
  const [name, setName] = useState(''); 

  return (
    <input
      value={name}
      onChange={(event) => {
        setName(event.currentTarget.value);
        setName(name); // ESLint problem reported
      }}
    />
  );
}

Examples of correct code:

function Input (props) {
  const [name, setName] = useState(''); 

  return (
    <input
      value={name}
      onChange={(event) => {
        setName(event.currentTarget.value);
      }}
    />
  );
}

function Input (props) {
  const [name, setName] = useState(''); 

  return (
    <input
      value={name}
      onChange={(event) => {
        const name = event.currentTarget.value; // Shadowing
        setName(name);
      }}
    />
  );
}

[ljharb]

If it’s a common problem only with the useState hook, it seems like eslint-plugin-react-hooks would be a better place for it.

[karlhorky]

I'll try, although from experience, this probably won't get accepted over there.

Edit: open https://github.com/facebook/react/issues/21595