react/hook-use-state

Require useState to be destructured into a [value, setValue] pair

has suggestions

useState returns a value and the function that updates it. When the two names don't match, as in [color, setFlavor], you can't tell which setter belongs to which state. When you keep the result in one variable, every use becomes state[0] and state[1].

The setter's name must be set followed by the value's name with a capital first letter. The rule only looks at useState and React.useState imported from "react". A useState() call that's returned directly, as in a custom hook, is allowed.

Configure#

Off by default. To turn it on:

bunfig.toml
[lint.rules]
"react/hook-use-state" = "error" # or "warn"

Every option, set to its default:

bunfig.toml
[lint.rules]
"react/hook-use-state" = ["error", {
  allowDestructuredState = false,
}]

Examples#

example.jsx3 problems
import React, { useState } from "react";

function Picker() {
  const color = useState("red");
  const [size, updateSize] = React.useState(1);
  const [open] = useState(false);
  return <div />;
}
example.jsxNo problems
import { useState } from "react";

function Picker() {
  const [color, setColor] = useState("red");
  const [size, setSize] = useState(1);
  return <div />;
}

function useToggle() {
  return useState(false);
}

Options#

OptionDefaultWhat it does
allowDestructuredStatefalseAllow the value to be destructured further. The setter can then have any name.
example.jsx1 problem
import { useState } from "react";

function Profile() {
  const [{ name, email }, setUser] = useState({ name: "", email: "" });
  return <div />;
}
example.jsxwith { "allowDestructuredState": true }No problems
import { useState } from "react";

function Profile() {
  const [{ name, email }, setUser] = useState({ name: "", email: "" });
  return <div />;
}