jsx-eslint/eslint-plugin-react

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

Open

#3872 opened on Jan 6, 2025

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

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

Tech stack
javascriptreact
Domain
developer experiencetooling
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
Basic knowledge of React and ESLintUnderstanding of lint rules
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Examine the source code of the `hook use state` rule in the eslint plugin react repository to determine whether it actually checks that `useState` is destructured or only checks naming symmetry of the destructured pair. Then compare with the documentation in the rule's metadata. Based on findings, either update the documentation to match the implementation or modify the rule to enforce destructuring and update docs accordingly. The issue author provides two possible resolutions.