logoESLint React
Rules

use-state

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

react-naming-convention/use-state

Full Name in @eslint-react/eslint-plugin

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

Features

🔍

Description

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

This rule ensures two things:

  1. The useState hook is destructured into a value and setter pair.
  2. The value and setter are named symmetrically (e.g. count and setCount).

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>;
}

Implementation

Previous

filename-extension

Next

class-component

On this page