jsx-eslint/eslint-plugin-react

[Bug]: `hook-use-state` is not doing what the documentation says it does

Open

#3,872 opened on Jan 6, 2025

View on GitHub
 (1 comment) (0 reactions) (0 assignees)JavaScript (2,797 forks)batch import
documentationhelp wanted

Repository metrics

Stars
 (8,630 stars)
PR merge metrics
 (No merged PRs in 30d)

Description

Is there an existing issue for this?

  • I have searched the existing issues and my issue is unique
  • My issue appears in the command-line and not only in the text editor

Description Overview

hook-use-state documentation says that the rule checks whether the value and setter variables destructured from a React.useState() call are named symmetrically.

It does not say that the rule checks whether the result of a react.useState class is destructured.

Either the description is wrong, or the implementation is wrong.

Expected Behavior

If the rule is actually checking whether the value and setter variables destructured from a React.useState() call are named symmetrically, then the following code sample should be correct.

import React from 'react';
export default function useColor() {
  // useState call is not destructured into value + setter pair
  const useStateResult = React.useState();
  return useStateResult;
}

If it is not, then, the description must be updated to:

This rule checks whether the return value of a React.useState() call is destructured, and the value and setter variables are named symmetrically.

eslint-plugin-react version

every

eslint version

v9

node version

v20

Contributor guide