Rules
use-state
Full Name in eslint-plugin-react-naming-convention
react-naming-convention/use-stateFull Name in @eslint-react/eslint-plugin
@eslint-react/naming-convention/use-stateDescription
Enforces destructuring and symmetric naming of useState hook value and setter.
This rule ensures two things:
- The
useStatehook is destructured into a value and setter pair. - The value and setter are named symmetrically (e.g.
countandsetCount).
Examples
Failing
import React, { useState } from "react";
function MyComponent() {
const useStateResult = useState(0);
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// - 'useState' call is not destructured into value + setter pair.
return <div>{useStateResult[0]}</div>;
}Passing
import React, { useState } from "react";
function MyComponent() {
const [count, setCount] = useState(0);
return <div>{count}</div>;
}import React, { useState } from "react";
function MyComponent() {
const [{ foo, bar, baz }, setFooBarBaz] = useState({
foo: "bbb",
bar: "aaa",
baz: "qqq",
});
return <div>{foo}</div>;
}