[New] Symmetric useState hook variable names

CHANGELOG.md

@@ -5,6 +5,11 @@ This change log adheres to standards from [Keep a CHANGELOG](http://keepachangel
 
 ## Unreleased
 
+### Added
+* add [`hook-use-state`] rule to enforce symmetric useState hook variable names ([#2921][] @duncanbeevers)
+
+[#2921]: https://github.com/yannickcr/eslint-plugin-react/pull/2921
+
 ## [7.28.0] - 2021.12.22
 
 ### Added
@@ -3498,6 +3503,7 @@ If you're still not using React 15 you can keep the old behavior by setting the
 [`forbid-foreign-prop-types`]: docs/rules/forbid-foreign-prop-types.md
 [`forbid-prop-types`]: docs/rules/forbid-prop-types.md
 [`function-component-definition`]: docs/rules/function-component-definition.md
+[`hook-use-state`]: docs/rules/hook-use-state.md
 [`jsx-boolean-value`]: docs/rules/jsx-boolean-value.md
 [`jsx-child-element-spacing`]: docs/rules/jsx-child-element-spacing.md
 [`jsx-closing-bracket-location`]: docs/rules/jsx-closing-bracket-location.md
@@ -3551,6 +3557,7 @@ If you're still not using React 15 you can keep the old behavior by setting the
 [`no-did-update-set-state`]: docs/rules/no-did-update-set-state.md
 [`no-direct-mutation-state`]: docs/rules/no-direct-mutation-state.md
 [`no-find-dom-node`]: docs/rules/no-find-dom-node.md
+[`no-invalid-html-attribute`]: docs/rules/no-invalid-html-attribute.md
 [`no-is-mounted`]: docs/rules/no-is-mounted.md
 [`no-multi-comp`]: docs/rules/no-multi-comp.md
 [`no-namespace`]: docs/rules/no-namespace.md
@@ -3586,4 +3593,3 @@ If you're still not using React 15 you can keep the old behavior by setting the
 [`style-prop-object`]: docs/rules/style-prop-object.md
 [`void-dom-elements-no-children`]: docs/rules/void-dom-elements-no-children.md
 [`wrap-multilines`]: docs/rules/jsx-wrap-multilines.md
-[`no-invalid-html-attribute`]: docs/rules/no-invalid-html-attribute.md

README.md

@@ -132,6 +132,7 @@ Enable the rules that you would like to use.
 | | | [react/forbid-foreign-prop-types](docs/rules/forbid-foreign-prop-types.md) | Forbid using another component's propTypes |
 | | | [react/forbid-prop-types](docs/rules/forbid-prop-types.md) | Forbid certain propTypes |
 | | 🔧 | [react/function-component-definition](docs/rules/function-component-definition.md) | Standardize the way function component get defined |
+| | | [react/hook-use-state](docs/rules/hook-use-state.md) | Ensure symmetric naming of useState hook value and setter variables |
 | | | [react/no-access-state-in-setstate](docs/rules/no-access-state-in-setstate.md) | Reports when this.state is accessed within setState |
 | | | [react/no-adjacent-inline-elements](docs/rules/no-adjacent-inline-elements.md) | Prevent adjacent inline elements not separated by whitespace. |
 | | | [react/no-array-index-key](docs/rules/no-array-index-key.md) | Prevent usage of Array index in keys |

docs/rules/hook-use-state.md

@@ -0,0 +1,46 @@
+# Ensure destructuring and symmetric naming of useState hook value and setter variables (react/hook-use-state)
+
+## Rule Details
+
+This rule checks whether the value and setter variables destructured from a `React.useState()` call are named symmetrically.
+
+Examples of **incorrect** code for this rule:
+
+```js
+import React from 'react';
+export default function useColor() {
+ // useState call is not destructured into value + setter pair
+ const useStateResult = React.useState();
+ return useStateResult;
+}
+```
+
+```js
+import React from 'react';
+export default function useColor() {
+ // useState call is destructured into value + setter pair, but identifier
+ // names do not follow the [thing, setThing] naming convention
+ const [color, updateColor] = React.useState();
+ return useStateResult;
+}
+```
+
+Examples of **correct** code for this rule:
+
+```js
+import React from 'react';
+export default function useColor() {
+ // useState call is destructured into value + setter pair whose identifiers
+ // follow the [thing, setThing] naming convention
+ const [color, setColor] = React.useState();
+ return [color, setColor];
+}
+```
+
+```js
+import React from 'react';
+export default function useColor() {
+ // useState result is directly returned
+ return React.useState();
+}
+```

index.js

@@ -16,6 +16,7 @@ const allRules = {
  'forbid-foreign-prop-types': require('./lib/rules/forbid-foreign-prop-types'),
  'forbid-prop-types': require('./lib/rules/forbid-prop-types'),
  'function-component-definition': require('./lib/rules/function-component-definition'),
+ 'hook-use-state': require('./lib/rules/hook-use-state'),
  'jsx-boolean-value': require('./lib/rules/jsx-boolean-value'),
  'jsx-child-element-spacing': require('./lib/rules/jsx-child-element-spacing'),
  'jsx-closing-bracket-location': require('./lib/rules/jsx-closing-bracket-location'),

lib/rules/hook-use-state.js

@@ -0,0 +1,152 @@
+/**
+ * @fileoverview Ensure symmetric naming of useState hook value and setter variables
+ * @author Duncan Beevers
+ */
+
+'use strict';
+
+const Components = require('../util/Components');
+const docsUrl = require('../util/docsUrl');
+const report = require('../util/report');
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+const messages = {
+ useStateErrorMessage: 'useState call is not destructured into value + setter pair',
+};
+
+module.exports = {
+ meta: {
+ docs: {
+ description: 'Ensure symmetric naming of useState hook value and setter variables',
+ category: 'Best Practices',
+ recommended: false,
+ url: docsUrl('hook-use-state'),
+ },
+ messages,
+ schema: [],
+ type: 'suggestion',
+ hasSuggestions: true,
+ },
+
+ create: Components.detect((context, components, util) => ({
+ CallExpression(node) {
+ const isImmediateReturn = node.parent
+ && node.parent.type === 'ReturnStatement';
+
+ if (isImmediateReturn || !util.isReactHookCall(node, ['useState'])) {
+ return;
+ }
+
+ const isDestructuringDeclarator = node.parent
+ && node.parent.type === 'VariableDeclarator'
+ && node.parent.id.type === 'ArrayPattern';
+
+ if (!isDestructuringDeclarator) {
+ report(
+ context,
+ messages.useStateErrorMessage,
+ 'useStateErrorMessage',
+ { node }
+ );
+ return;
+ }
+
+ const variableNodes = node.parent.id.elements;
+ const valueVariable = variableNodes[0];
+ const setterVariable = variableNodes[1];
+
+ const valueVariableName = valueVariable
+ ? valueVariable.name
+ : undefined;
+
+ const setterVariableName = setterVariable
+ ? setterVariable.name
+ : undefined;
+
+ const expectedSetterVariableName = valueVariableName ? (
+ `set${valueVariableName.charAt(0).toUpperCase()}${valueVariableName.slice(1)}`
+ ) : undefined;
+
+ const isSymmetricGetterSetterPair = valueVariable
+ && setterVariable
+ && setterVariableName === expectedSetterVariableName
+ && variableNodes.length === 2;
+
+ if (!isSymmetricGetterSetterPair) {
+ const suggestions = [
+ {
+ desc: 'Destructure useState call into value + setter pair',
+ fix: (fixer) => {
+ const fix = fixer.replaceTextRange(
+ node.parent.id.range,
+ `[${valueVariableName}, ${expectedSetterVariableName}]`
+ );
+
+ return fix;
+ },
+ },
+ ];
+
+ const defaultReactImports = components.getDefaultReactImports();
+ const defaultReactImportSpecifier = defaultReactImports
+ ? defaultReactImports[0]
+ : undefined;
+
+ const defaultReactImportName = defaultReactImportSpecifier
+ ? defaultReactImportSpecifier.local.name
+ : undefined;
+
+ const namedReactImports = components.getNamedReactImports();
+ const useStateReactImportSpecifier = namedReactImports
+ ? namedReactImports.find((specifier) => specifier.imported.name === 'useState')
+ : undefined;
+
+ const isSingleGetter = valueVariable && variableNodes.length === 1;
+ const isUseStateCalledWithSingleArgument = node.arguments.length === 1;
+ if (isSingleGetter && isUseStateCalledWithSingleArgument) {
+ const useMemoReactImportSpecifier = namedReactImports
+ && namedReactImports.find((specifier) => specifier.imported.name === 'useMemo');
+
+ let useMemoCode;
+ if (useMemoReactImportSpecifier) {
+ useMemoCode = useMemoReactImportSpecifier.local.name;
+ } else if (defaultReactImportName) {
+ useMemoCode = `${defaultReactImportName}.useMemo`;
+ } else {
+ useMemoCode = 'useMemo';
+ }
+
+ suggestions.unshift({
+ desc: 'Replace useState call with useMemo',
+ fix: (fixer) => [
+ // Add useMemo import, if necessary
+ useStateReactImportSpecifier
+ && (!useMemoReactImportSpecifier || defaultReactImportName)
+ && fixer.insertTextAfter(useStateReactImportSpecifier, ', useMemo'),
+ // Convert single-value destructure to simple assignment
+ fixer.replaceTextRange(node.parent.id.range, valueVariableName),
+ // Convert useState call to useMemo + arrow function + dependency array
+ fixer.replaceTextRange(
+ node.range,
+ `${useMemoCode}(() => ${context.getSourceCode().getText(node.arguments[0])}, [])`
+ ),
+ ].filter(Boolean),
+ });
+ }
+
+ report(
+ context,
+ messages.useStateErrorMessage,
+ 'useStateErrorMessage',
+ {
+ node: node.parent.id,
+ suggest: suggestions,
+ }
+ );
+ }
+ },
+ })),
+};