use-state

Full Name in @eslint-react/eslint-plugin

@eslint-react/naming-convention/use-state

Full Name in eslint-plugin-react-naming-convention

react-naming-convention/use-state

Features

⚙️

Presets

recommended recommended-typescript recommended-type-checked strict strict-typescript strict-type-checked

Description

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

This rule ensures two things:

The useState hook is destructured into a value and setter pair (optional, disabled by default).
The value and setter are named symmetrically (e.g. count and setCount).

Examples

Failing

import React, { useState } from "react";

function MyComponent() {
  const [count, updateFoo] = useState(0);
  //    ^^^^^^^^^^^^^^^^^^
  //    - The setter should be named 'set' followed by the capitalized state variable name, e.g., 'setState' for 'state'.

  return <div>{count}</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>;
}

Rule Options

type Options = {
  enforceAssignment?: boolean;
  enforceSetterName?: boolean;
};

`enforceAssignment`

Enforces that the useState hook is destructured into a value and setter pair.

Default: false

`enforceSetterName`

Enforces that the setter is named symmetrically to the value.

Default: true