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-stateFeatures
🔍
What it does
Enforces destructuring and symmetric naming of useState hook value and setter variables
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>;
}