Documentation
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>;
}
naming-convention/filename-extensiondebug/class-component