[Bug]: "react/jsx-handler-names" extremely slow with "checkInlineFunction: true " on a single file?

[webmatrixxxl]

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

==========================================
=> Example JS file to run lint: example.js.txt <=
=========================================

ESlint "react/jsx-handler-names" is extremely slow when checkInlineFunction: true on a single file.

 'react/jsx-handler-names': [
      'error',
      {
        checkLocalVariables: true,
        checkInlineFunction: true
      }
    ],

If I set checkInlineFunction to false the rule is not even mentioned in the time report. It is drastically faster.

Full ESlint config:

/* eslint-disable import/no-unused-modules */

module.exports = {
  env: {
    browser: true,
    node: true,
    es2021: true,
  },
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 2021,
  },
  plugins: [
    'prettier',
    'import',
    'react',
    'react-hooks',
    'jsx-a11y',
    'eslint-plugin-no-inline-styles',
  ],
  extends: [
    'eslint:recommended',
    'prettier',
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
    'plugin:jsx-a11y/recommended',
    'plugin:react-hooks/recommended',
  ],
  ignorePatterns: ['node_modules/', 'build/', 'dist/'],
  rules: {
    'no-console': ['warn', { allow: ['warn', 'error'] }],
    'no-inline-styles/no-inline-styles': 'error',
    'react/prop-types': 'off',
    'no-unused-vars': [
      'error',
      {
        vars: 'all',
        args: 'none',
        ignoreRestSiblings: true,
        argsIgnorePattern: '^_',
        varsIgnorePattern: '^_',
        caughtErrorsIgnorePattern: '^_',
      },
    ],
    'react/jsx-filename-extension': 'off',
    'react/jsx-uses-react': 'error',
    'react/display-name': 'off',
    'react/jsx-uses-vars': 'error',
    'no-empty-function': [
      'error',
      {
        allow: ['arrowFunctions', 'getters', 'setters'],
      },
    ],
    'class-methods-use-this': 'off',
    eqeqeq: 'error',
    'import/default': 'error',
    'import/named': 'error',
    'import/no-named-as-default-member': 'off',
    'import/order': [
      'error',
      {
        groups: ['builtin', 'unknown', 'external', 'internal', 'sibling'],
        pathGroups: [
          {
            pattern: 'react',
            group: 'builtin',
            position: 'before',
          },
        ],
        pathGroupsExcludedImportTypes: ['react'],
        'newlines-between': 'always-and-inside-groups',
        alphabetize: {
          order: 'asc',
          caseInsensitive: false,
        },
      },
    ],
    'import/no-unused-modules': [
      'error',
      {
        unusedExports: true,
        missingExports: true,
      },
    ],
    'no-param-reassign': [
      2,
      {
        props: false,
      },
    ],
    'no-implicit-coercion': ['error'],
    'no-extra-boolean-cast': ['error'],
    'no-use-before-define': 'error',
    'prettier/prettier': 'error',
    'react/boolean-prop-naming': ['error', { rule: '^(is|has)[A-Z]([A-Za-z0-9]?)+' }],
    'react/button-has-type': 'error',
    'react/function-component-definition': ['error', { namedComponents: 'arrow-function' }],
    'react/hook-use-state': ['warn', { allowDestructuredState: true }],
    'react/iframe-missing-sandbox': 'error',
    'react/jsx-boolean-value': ['error', 'never'],
    'react/jsx-curly-brace-presence': ['warn', { propElementValues: 'always' }],
    'react/jsx-fragments': 'error',
    'react/destructuring-assignment': ['error', 'never'],
    'react/jsx-handler-names': [
      'error',
      {
        checkLocalVariables: true,
        checkInlineFunction: false,
      },
    ],
    'react/jsx-key': ['error', { warnOnDuplicates: true }],
    'react/jsx-max-depth': ['warn', { max: 8 }],
    'react/jsx-newline': ['warn', { prevent: true, allowMultilines: true }],
    'react/jsx-no-constructed-context-values': 'error',
    'react/jsx-no-leaked-render': ['error', { validStrategies: ['ternary'] }],
    'react/jsx-no-script-url': [
      'error',
      [
        {
          name: 'Link',
          props: ['to'],
        },
      ], // Should describe explicitly components and props that should be checked.
    ],
    'react/jsx-no-useless-fragment': ['warn', { allowExpressions: true }],
    'react/jsx-pascal-case': 'error',
    'react/jsx-sort-props': [
      'warn',
      {
        callbacksLast: true,
        shorthandFirst: true,
        shorthandLast: false,
        multiline: 'last',
        ignoreCase: true,
        noSortAlphabetically: false,
      },
    ],
    'react-hooks/exhaustive-deps': 'warn',
    /**
     * This rule enforces to remove useless index path segments
     * Example: "../../../ui/inputs/input-textarea/index", should be "../../../ui/inputs/input-textarea"
     */
    'import/no-useless-path-segments': [
      'error',
      {
        noUselessIndex: true,
      },
    ],
  },
  overrides: [],
  settings: {
    'import/ignore': ['node_modules'],
    react: {
      version: 'detect',
    },
  },
  globals: {},
};

Expected Behavior

It should work normally fast.

eslint-plugin-react version

v7.37.2

eslint version

v8.57.1

node version

v20.15.0

[ljharb]

That's very strange - the only code in the rule that pivots off of the checkInlineFunction check is either checkInlineFunction && isInlineHandler(node) ? expression.body.callee : expression or || (!checkInlineFunction && isInlineHandler(node)) - and isInlineHandler is just return node.value.expression.type === 'ArrowFunctionExpression';.

Is there a chance that there's one or two files in particular that are slow with this setting, and you could provide the relevant code?

[webmatrixxxl]

That's very strange - the only code in the rule that pivots off of the checkInlineFunction check is either checkInlineFunction && isInlineHandler(node) ? expression.body.callee : expression or || (!checkInlineFunction && isInlineHandler(node)) - and isInlineHandler is just return node.value.expression.type === 'ArrowFunctionExpression';.

Is there a chance that there's one or two files in particular that are slow with this setting, and you could provide the relevant code?

I just updated the ticket with a link to an example code file:
example.js.txt

The problem is observed when we have a lot of inline functions.

[webmatrixxxl]

@ljharb uploaded correct example.js.txt file. Previous one was wrong. All links are updated now.