hook-use-state.js

/**
 * @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'),
    },
    fixable: 'code',
    messages,
    schema: [],
  },

  create: Components.detect((context, components, utils) => {
    let reactImportLocalName;
    let reactUseStateLocalName;

    return {
      CallExpression(node) {
        const isReactUseStateCall = (
          reactImportLocalName
          && node.callee.type === 'MemberExpression'
          && node.callee.object.type === 'Identifier'
          && node.callee.object.name === reactImportLocalName
          && node.callee.property.type === 'Identifier'
          && node.callee.property.name === 'useState'
        );

        const isUseStateCall = (
          reactUseStateLocalName
          && node.callee.type === 'Identifier'
          && node.callee.name === reactUseStateLocalName
        );

        // Ignore unless this is a useState() or React.useState() call.
        if (!isReactUseStateCall && !isUseStateCall) {
          return;
        }

        const isDestructuringDeclarator = (
          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;

        if (
          !valueVariable
          || !setterVariable
          || setterVariableName !== expectedSetterVariableName
          || variableNodes.length !== 2
        ) {
          report(
            context,
            messages.useStateErrorMessage,
            'useStateErrorMessage',
            {
              node: node.parent.id,
              fix: valueVariableName ? (fixer) => fixer.replaceTextRange(
                [node.parent.id.range[0], node.parent.id.range[1]],
                `[${valueVariableName}, ${expectedSetterVariableName}]`
              ) : undefined,
            }
          );
        }
      },
      ImportDeclaration(node) {
        const isReactImported = node.source.type === 'Literal' && node.source.value === 'react';
        const reactDefaultSpecifier = node.specifiers.find((specifier) => specifier.type === 'ImportDefaultSpecifier');
        reactImportLocalName = reactDefaultSpecifier ? reactDefaultSpecifier.local.name : undefined;

        const reactUseStateSpecifier = isReactImported
          ? node.specifiers.find(
            (specifier) => (
              specifier.type === 'ImportSpecifier'
              && specifier.imported.name === 'useState'
            )
          )
          : undefined;

        reactUseStateLocalName = reactUseStateSpecifier
          ? reactUseStateSpecifier.local.name
          : undefined;
      },
    };
  }),
};