libs/eslint-rules/require-named-effect.js

require-named-effect.js

const isUseEffect = (node) => node.callee.name === 'useEffect';

const argumentIsArrowFunction = (node) => node.arguments[0].type === 'ArrowFunctionExpression';

const effectBodyIsSingleFunction = (node) => {
  const { body } = node.arguments[0];

  // It's a single unwrapped function call:
  //   `useEffect(() => theNameOfAFunction(), []);`
  if (body.type === 'CallExpression') {
    return true;
  }

  // There's a function body, but it just calls another function:
  //   `useEffect(() => {
  //     theOnlyChildIsAFunctionCall();
  //   }, []);`
  if (body.body?.length === 1 && body.body[0]?.expression?.type === 'CallExpression') {
    return true;
  }

  return false;
};

const fail = (report, node) => report(node, 'Complex effects must be a named function.');

module.exports = {
  create(context) {
    return {
      CallExpression(node) {
        if (
          isUseEffect(node) &&
          argumentIsArrowFunction(node) &&
          !effectBodyIsSingleFunction(node)
        ) {
          fail(context.report, node);
        }
      },
    };
  },
};

const rule = require('./require-named-effect');
const ruleTester = require('./helpers/ruleTester');

describe('require-named-effect', () => {
  const valid = [
    `useEffect(function namedFunction() {}, []);`,
    `useEffect(theNameOfAFunction(), []);`,
    `useEffect(() => theNameOfAFunction(), []);`,
    `useEffect(() => {
      theOnlyChildIsAFunctionCall();
    }, []);`,
  ];

  const invalid = [
    `useEffect(() => {}, []);`,
    `useEffect(() => {
      const t = 1;
      diallowTwoThings(t);
    }, []);`,
  ];

  ruleTester.run('require-named-effect', rule, {
    valid,
    invalid: invalid.map((code) => ({
      code,
      errors: ['Complex effects must be a named function.'],
    })),
  });
});