#hook-use-state

#Configuration

import { defineConfig, reactPlugin } from '@rslint/core';

export default defineConfig([
  reactPlugin.configs.recommended,
  {
    rules: {
      'react/hook-use-state': 'error',
    },
  },
]);

Require useState calls to be destructured into a value and matching setter pair.

#Rule Details

This rule ensures that a React useState call uses a symmetric [value, setValue] destructure. Returning a useState result directly is allowed.

Suggestions that replace a TypeScript destructuring pattern also remove its type annotation. The annotation describes the original pattern and is not carried over to the replacement.

JavaScript JSDoc casts are transparent to this rule.

Examples of incorrect code for this rule:

import { useState } from "react";

const color = useState("blue");
const [color, updateColor] = useState("blue");

Examples of correct code for this rule:

import { useState } from "react";

const [color, setColor] = useState("blue");

function useColor() {
  return useState("blue");
}

#Options

allowDestructuredState defaults to false. When enabled, the value part may itself be destructured, provided the setter remains a simple binding.

Examples of correct code for this rule with { "allowDestructuredState": true }:

{ "react/hook-use-state": ["error", { "allowDestructuredState": true }] }

import { useState } from "react";

const [{ name }, setUser] = useState({ name: "Ada" });

#Original Documentation

• eslint-plugin-react: hook-use-state
• Source code