Rules
naming-convention/use-state

use-state

Rule category

Convention.

What it does

Enforces destructuring and symmetric naming of useState hook value and setter variables

Examples

Failing

import React, { function useState<S>(initialState: S | (() => S)): [S, React.Dispatch<React.SetStateAction<S>>] (+1 overload)
Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}
useState
} from "react";
function function Example(): React.JSX.ElementExample() { const const useStateResult: [number, React.Dispatch<React.SetStateAction<number>>]useStateResult = useState<number>(initialState: number | (() => number)): [number, React.Dispatch<React.SetStateAction<number>>] (+1 overload)
Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}
useState
(0)
;
// - 'useState' call is not destructured into value + setter pair. return <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>{const useStateResult: [number, React.Dispatch<React.SetStateAction<number>>]useStateResult[0]}</JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>; }

Passing

import React, { function useState<S>(initialState: S | (() => S)): [S, React.Dispatch<React.SetStateAction<S>>] (+1 overload)
Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}
useState
} from "react";
function function Example(): React.JSX.ElementExample() { const [const count: numbercount, const setCount: React.Dispatch<React.SetStateAction<number>>setCount] = useState<number>(initialState: number | (() => number)): [number, React.Dispatch<React.SetStateAction<number>>] (+1 overload)
Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}
useState
(0);
return <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>{const count: numbercount}</JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>; }
import React, { function useState<S>(initialState: S | (() => S)): [S, React.Dispatch<React.SetStateAction<S>>] (+1 overload)
Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}
useState
} from "react";
function function Example(): React.JSX.ElementExample() { const [{ const foo: stringfoo, const bar: stringbar, const baz: stringbaz },
const setFooBarBaz: React.Dispatch<React.SetStateAction<{
    foo: string;
    bar: string;
    baz: string;
}>>
setFooBarBaz
] =
useState<{
    foo: string;
    bar: string;
    baz: string;
}>(initialState: {
    foo: string;
    bar: string;
    baz: string;
} | (() => {
    foo: string;
    bar: string;
    baz: string;
})): [{
    foo: string;
    bar: string;
    baz: string;
}, React.Dispatch<React.SetStateAction<{
    foo: string;
    bar: string;
    baz: string;
}>>] (+1 overload)
Returns a stateful value, and a function to update it.
@version16.8.0@see{@link https://react.dev/reference/react/useState}
useState
({
foo: stringfoo: "bbb", bar: stringbar: "aaa", baz: stringbaz: "qqq", }); return <JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>{const foo: stringfoo}</JSX.IntrinsicElements.div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>div>; }