@blumintinc/eslint-plugin-blumint 1.13.0 → 1.14.0

package/lib/rules/memo-nested-react-components.d.ts

@@ -0,0 +1,8 @@
+import { TSESLint } from '@typescript-eslint/utils';
+type Options = [
+    {
+        ignorePatterns?: string[];
+    }
+];
+export declare const memoNestedReactComponents: TSESLint.RuleModule<"memoizeNestedComponent", Options, TSESLint.RuleListener>;
+export {};

package/lib/rules/memo-nested-react-components.js

@@ -0,0 +1,410 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.memoNestedReactComponents = void 0;
+const utils_1 = require("@typescript-eslint/utils");
+const minimatch_1 = require("minimatch");
+const createRule_1 = require("../utils/createRule");
+const ASTHelpers_1 = require("../utils/ASTHelpers");
+const CALLBACK_HOOKS = new Set(['useCallback', 'useDeepCompareCallback']);
+const HOOK_REPLACEMENT = {
+    useCallback: 'useMemo',
+    useDeepCompareCallback: 'useDeepCompareMemo',
+};
+const collectReactImports = (sourceCode) => {
+    const reactImports = { namespace: null, named: {} };
+    for (const statement of sourceCode.ast.body) {
+        if (statement.type !== utils_1.AST_NODE_TYPES.ImportDeclaration)
+            continue;
+        if (statement.source.value !== 'react')
+            continue;
+        for (const specifier of statement.specifiers) {
+            if (specifier.type === utils_1.AST_NODE_TYPES.ImportSpecifier &&
+                specifier.imported.type === utils_1.AST_NODE_TYPES.Identifier) {
+                const importedName = specifier.imported.name;
+                if (importedName === 'createElement' ||
+                    importedName === 'memo' ||
+                    importedName === 'forwardRef') {
+                    reactImports.named[importedName] = specifier.local.name;
+                }
+            }
+            if (specifier.type === utils_1.AST_NODE_TYPES.ImportDefaultSpecifier ||
+                specifier.type === utils_1.AST_NODE_TYPES.ImportNamespaceSpecifier) {
+                reactImports.namespace = specifier.local.name;
+            }
+        }
+    }
+    return reactImports;
+};
+const calleeMatchesReactMember = (callee, reactImports, member) => {
+    if (callee.type === utils_1.AST_NODE_TYPES.Identifier) {
+        return reactImports.named[member] === callee.name;
+    }
+    if (callee.type === utils_1.AST_NODE_TYPES.MemberExpression &&
+        !callee.computed &&
+        callee.property.type === utils_1.AST_NODE_TYPES.Identifier &&
+        callee.property.name === member &&
+        callee.object.type === utils_1.AST_NODE_TYPES.Identifier &&
+        reactImports.namespace === callee.object.name) {
+        return true;
+    }
+    return false;
+};
+const isFunctionExpression = (node) => {
+    return (node.type === utils_1.AST_NODE_TYPES.ArrowFunctionExpression ||
+        node.type === utils_1.AST_NODE_TYPES.FunctionExpression);
+};
+const unwrapExpression = (expression) => {
+    if (expression.type === utils_1.AST_NODE_TYPES.TSAsExpression) {
+        return unwrapExpression(expression.expression);
+    }
+    if (expression.type === utils_1.AST_NODE_TYPES.TSSatisfiesExpression) {
+        return unwrapExpression(expression.expression);
+    }
+    if (expression.type === utils_1.AST_NODE_TYPES.TSNonNullExpression) {
+        return unwrapExpression(expression.expression);
+    }
+    /**
+     * ParenthesizedExpression appears in the parsed AST even though the type
+     * is missing from AST_NODE_TYPES. This assertion safely unwraps to keep
+     * traversal consistent.
+     */
+    if (expression.type ===
+        'ParenthesizedExpression') {
+        return unwrapExpression(expression.expression);
+    }
+    return expression;
+};
+const isReactCreateElementCall = (node, reactImports) => {
+    return calleeMatchesReactMember(node.callee, reactImports, 'createElement');
+};
+const isHookCall = (callee) => {
+    if (callee.type === utils_1.AST_NODE_TYPES.Identifier) {
+        if (CALLBACK_HOOKS.has(callee.name)) {
+            return { name: callee.name };
+        }
+        return null;
+    }
+    if (callee.type === utils_1.AST_NODE_TYPES.MemberExpression &&
+        !callee.computed &&
+        callee.property.type === utils_1.AST_NODE_TYPES.Identifier &&
+        CALLBACK_HOOKS.has(callee.property.name)) {
+        return { name: callee.property.name };
+    }
+    return null;
+};
+const isForwardRefCall = (node, reactImports) => {
+    return calleeMatchesReactMember(node.callee, reactImports, 'forwardRef');
+};
+const isMemoCall = (node, reactImports) => {
+    return calleeMatchesReactMember(node.callee, reactImports, 'memo');
+};
+const filterPresentResults = (results) => {
+    return results.filter((result) => Boolean(result));
+};
+const areAllComponentsCallbacks = (components) => {
+    return components.every((result) => result.componentIsCallback);
+};
+const createMergedResult = (components) => {
+    return {
+        found: true,
+        // Auto-fix wraps the callback in memo() and swaps the hook. That is only valid when
+        // every branch is itself a component callback (returns JSX/createElement directly).
+        // If any branch yields a component factory, the transformation changes behavior.
+        componentIsCallback: areAllComponentsCallbacks(components),
+    };
+};
+const mergeComponentResults = (...results) => {
+    const present = filterPresentResults(results);
+    if (!present.length) {
+        return null;
+    }
+    return createMergedResult(present);
+};
+const expressionCreatesComponent = (expression, reactImports) => {
+    if (!expression) {
+        return null;
+    }
+    const unwrapped = unwrapExpression(expression);
+    if (unwrapped.type === utils_1.AST_NODE_TYPES.JSXElement ||
+        unwrapped.type === utils_1.AST_NODE_TYPES.JSXFragment) {
+        return { found: true, componentIsCallback: true };
+    }
+    if (unwrapped.type === utils_1.AST_NODE_TYPES.CallExpression &&
+        isReactCreateElementCall(unwrapped, reactImports)) {
+        return { found: true, componentIsCallback: true };
+    }
+    switch (unwrapped.type) {
+        case utils_1.AST_NODE_TYPES.ArrowFunctionExpression:
+        case utils_1.AST_NODE_TYPES.FunctionExpression: {
+            const inner = functionCreatesComponent(unwrapped, reactImports);
+            return inner ? { found: true, componentIsCallback: false } : null;
+        }
+        case utils_1.AST_NODE_TYPES.CallExpression: {
+            if (isForwardRefCall(unwrapped, reactImports) ||
+                isMemoCall(unwrapped, reactImports)) {
+                const firstArg = unwrapped.arguments[0];
+                if (firstArg && isFunctionExpression(firstArg)) {
+                    const inner = functionCreatesComponent(firstArg, reactImports);
+                    if (inner) {
+                        return { found: true, componentIsCallback: false };
+                    }
+                }
+            }
+            return null;
+        }
+        case utils_1.AST_NODE_TYPES.ConditionalExpression: {
+            const cons = expressionCreatesComponent(unwrapped.consequent, reactImports);
+            const alt = expressionCreatesComponent(unwrapped.alternate, reactImports);
+            return mergeComponentResults(cons, alt);
+        }
+        case utils_1.AST_NODE_TYPES.LogicalExpression: {
+            const left = expressionCreatesComponent(unwrapped.left, reactImports);
+            const right = expressionCreatesComponent(unwrapped.right, reactImports);
+            return mergeComponentResults(left, right);
+        }
+        case utils_1.AST_NODE_TYPES.SequenceExpression: {
+            const last = unwrapped.expressions[unwrapped.expressions.length - 1];
+            return expressionCreatesComponent(last || null, reactImports);
+        }
+        case utils_1.AST_NODE_TYPES.ArrayExpression: {
+            const matches = unwrapped.elements
+                .map((element) => element && element.type !== utils_1.AST_NODE_TYPES.SpreadElement
+                ? expressionCreatesComponent(element, reactImports)
+                : null)
+                .filter(Boolean);
+            return mergeComponentResults(...matches);
+        }
+        default:
+            return null;
+    }
+};
+const statementCreatesComponent = (node, reactImports) => {
+    switch (node.type) {
+        case utils_1.AST_NODE_TYPES.ReturnStatement:
+            return expressionCreatesComponent(node.argument, reactImports);
+        case utils_1.AST_NODE_TYPES.IfStatement: {
+            const cons = node.consequent.type === utils_1.AST_NODE_TYPES.BlockStatement
+                ? blockCreatesComponent(node.consequent, reactImports)
+                : statementCreatesComponent(node.consequent, reactImports);
+            const alt = node.alternate
+                ? node.alternate.type === utils_1.AST_NODE_TYPES.BlockStatement
+                    ? blockCreatesComponent(node.alternate, reactImports)
+                    : statementCreatesComponent(node.alternate, reactImports)
+                : null;
+            return mergeComponentResults(cons, alt);
+        }
+        case utils_1.AST_NODE_TYPES.SwitchStatement: {
+            const matches = [];
+            for (const switchCase of node.cases) {
+                for (const consequent of switchCase.consequent) {
+                    matches.push(statementCreatesComponent(consequent, reactImports));
+                }
+            }
+            return mergeComponentResults(...matches);
+        }
+        case utils_1.AST_NODE_TYPES.BlockStatement:
+            return blockCreatesComponent(node, reactImports);
+        case utils_1.AST_NODE_TYPES.ForStatement:
+        case utils_1.AST_NODE_TYPES.ForInStatement:
+        case utils_1.AST_NODE_TYPES.ForOfStatement:
+        case utils_1.AST_NODE_TYPES.WhileStatement:
+        case utils_1.AST_NODE_TYPES.DoWhileStatement: {
+            if (node.body.type === utils_1.AST_NODE_TYPES.BlockStatement) {
+                return blockCreatesComponent(node.body, reactImports);
+            }
+            return statementCreatesComponent(node.body, reactImports);
+        }
+        case utils_1.AST_NODE_TYPES.TryStatement: {
+            const blockMatch = blockCreatesComponent(node.block, reactImports);
+            const handlerMatch = node.handler?.body
+                ? blockCreatesComponent(node.handler.body, reactImports)
+                : null;
+            const finalizerMatch = node.finalizer
+                ? blockCreatesComponent(node.finalizer, reactImports)
+                : null;
+            return mergeComponentResults(blockMatch, handlerMatch, finalizerMatch);
+        }
+        default:
+            return null;
+    }
+};
+const blockCreatesComponent = (block, reactImports) => {
+    const matches = [];
+    for (const statement of block.body) {
+        matches.push(statementCreatesComponent(statement, reactImports));
+    }
+    return mergeComponentResults(...matches);
+};
+const functionCreatesComponent = (node, reactImports) => {
+    if (node.body.type === utils_1.AST_NODE_TYPES.BlockStatement) {
+        return blockCreatesComponent(node.body, reactImports);
+    }
+    return expressionCreatesComponent(node.body, reactImports);
+};
+const shouldIgnoreFile = (filename, patterns) => {
+    return patterns.some((pattern) => (0, minimatch_1.minimatch)(filename, pattern));
+};
+const getVariableName = (node) => {
+    if (node.parent &&
+        node.parent.type === utils_1.AST_NODE_TYPES.VariableDeclarator &&
+        node.parent.id.type === utils_1.AST_NODE_TYPES.Identifier) {
+        return node.parent.id.name;
+    }
+    return null;
+};
+const findMemoReference = (reactImports) => {
+    if (reactImports.namespace) {
+        return `${reactImports.namespace}.memo`;
+    }
+    return reactImports.named.memo ?? null;
+};
+const hasIdentifierInScope = (identifierName, scope) => {
+    return !!ASTHelpers_1.ASTHelpers.findVariableInScope(scope, identifierName);
+};
+exports.memoNestedReactComponents = (0, createRule_1.createRule)({
+    name: 'memo-nested-react-components',
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description: 'Disallow React components defined in useCallback/useDeepCompareCallback',
+            recommended: 'error',
+        },
+        fixable: 'code',
+        schema: [
+            {
+                type: 'object',
+                properties: {
+                    ignorePatterns: {
+                        type: 'array',
+                        items: { type: 'string' },
+                        default: [],
+                    },
+                },
+                additionalProperties: false,
+            },
+        ],
+        messages: {
+            memoizeNestedComponent: `What's wrong: React component "{{componentName}}" is created inside {{hookName}}.
+Why it matters: Components defined inside callbacks get new identities when the callback changes, causing React to remount them and drop their state and effects.
+How to fix: Create the component via {{replacementHook}} and wrap it in memo() so its identity stays stable across renders.`,
+        },
+    },
+    defaultOptions: [{}],
+    create(context, [options]) {
+        const ignorePatterns = options?.ignorePatterns ?? [];
+        const filename = context.filename ?? context.getFilename();
+        if (ignorePatterns.length && shouldIgnoreFile(filename, ignorePatterns)) {
+            return {};
+        }
+        const sourceCode = context.sourceCode ?? context.getSourceCode();
+        const reactImports = collectReactImports(sourceCode);
+        const memoReference = findMemoReference(reactImports);
+        return {
+            CallExpression(node) {
+                const hook = isHookCall(node.callee);
+                if (!hook)
+                    return;
+                const callback = node.arguments[0];
+                if (!callback || callback.type === utils_1.AST_NODE_TYPES.SpreadElement) {
+                    return;
+                }
+                const componentMatch = isFunctionExpression(callback)
+                    ? functionCreatesComponent(callback, reactImports)
+                    : expressionCreatesComponent(callback, reactImports);
+                if (!componentMatch) {
+                    return;
+                }
+                const componentName = getVariableName(node) ??
+                    (isFunctionExpression(callback) &&
+                        callback.id?.type === utils_1.AST_NODE_TYPES.Identifier
+                        ? callback.id.name
+                        : 'component');
+                const replacementHook = HOOK_REPLACEMENT[hook.name];
+                context.report({
+                    node,
+                    messageId: 'memoizeNestedComponent',
+                    data: {
+                        componentName,
+                        hookName: `${hook.name}()`,
+                        replacementHook: `${replacementHook}()`,
+                    },
+                    fix: (fixer) => {
+                        if (!memoReference) {
+                            return null;
+                        }
+                        const memoNamespace = memoReference.endsWith('.memo')
+                            ? memoReference.slice(0, -'.memo'.length)
+                            : null;
+                        // Prefer SourceCode#getScope when available; fall back to RuleContext#getScope for ESLint compatibility.
+                        const sourceCodeWithScope = sourceCode;
+                        const scope = typeof sourceCodeWithScope.getScope === 'function'
+                            ? sourceCodeWithScope.getScope(node)
+                            : context.getScope();
+                        const replacementIdentifierAvailable = hook.name === 'useCallback'
+                            ? hasIdentifierInScope(HOOK_REPLACEMENT.useCallback, scope)
+                            : hasIdentifierInScope(HOOK_REPLACEMENT.useDeepCompareCallback, scope);
+                        if (!replacementIdentifierAvailable) {
+                            // When the standalone replacement hook (useMemo/useDeepCompareMemo) is not imported,
+                            // we can only fix member expressions that use the React namespace.
+                            if (node.callee.type !== utils_1.AST_NODE_TYPES.MemberExpression ||
+                                node.callee.object.type !== utils_1.AST_NODE_TYPES.Identifier) {
+                                return null;
+                            }
+                            // Ensure memo's namespace matches the hook's namespace (e.g., React.useCallback → React.useMemo + React.memo).
+                            if (memoReference &&
+                                memoReference.includes('.') &&
+                                memoReference !== `${node.callee.object.name}.memo`) {
+                                return null;
+                            }
+                        }
+                        // Component factories (functions returning functions that return JSX) require manual refactoring.
+                        if (!componentMatch.componentIsCallback) {
+                            return null;
+                        }
+                        // Ensure callback is a function expression before attempting to wrap it.
+                        if (!isFunctionExpression(callback)) {
+                            return null;
+                        }
+                        // React.memo() expects a synchronous component function. Wrapping async functions or
+                        // generators would produce a Promise/yielding component, which is not renderable.
+                        if (callback.async ||
+                            (callback.type === utils_1.AST_NODE_TYPES.FunctionExpression &&
+                                callback.generator)) {
+                            return null;
+                        }
+                        // Avoid rewriting non-React namespaces (e.g., Hooks.useCallback → Hooks.useMemo),
+                        // even when useMemo/memo are available as named imports.
+                        if (node.callee.type === utils_1.AST_NODE_TYPES.MemberExpression) {
+                            if (node.callee.object.type !== utils_1.AST_NODE_TYPES.Identifier ||
+                                !reactImports.namespace ||
+                                node.callee.object.name !== reactImports.namespace) {
+                                return null;
+                            }
+                        }
+                        // Prevent mixing namespaces: don't apply fix when hook and memo use different React imports.
+                        if (memoNamespace &&
+                            node.callee.type === utils_1.AST_NODE_TYPES.MemberExpression &&
+                            node.callee.object.type === utils_1.AST_NODE_TYPES.Identifier &&
+                            node.callee.object.name !== memoNamespace) {
+                            return null;
+                        }
+                        const callbackText = sourceCode.getText(callback);
+                        const callbackReplacement = `() => ${memoReference}(${callbackText})`;
+                        const fixes = [
+                            fixer.replaceText(callback, callbackReplacement),
+                        ];
+                        if (node.callee.type === utils_1.AST_NODE_TYPES.Identifier) {
+                            fixes.push(fixer.replaceText(node.callee, HOOK_REPLACEMENT[node.callee.name]));
+                        }
+                        else if (node.callee.type === utils_1.AST_NODE_TYPES.MemberExpression &&
+                            node.callee.property.type === utils_1.AST_NODE_TYPES.Identifier) {
+                            fixes.push(fixer.replaceText(node.callee.property, HOOK_REPLACEMENT[node.callee.property.name]));
+                        }
+                        return fixes;
+                    },
+                });
+            },
+        };
+    },
+});
+//# sourceMappingURL=memo-nested-react-components.js.map

package/lib/rules/no-always-true-false-conditions.d.ts

@@ -1,3 +1,4 @@
+import type { TSESLint } from '@typescript-eslint/utils';
 type MessageIds = 'alwaysTrueCondition' | 'alwaysFalseCondition';
-export declare const noAlwaysTrueFalseConditions: import("@typescript-eslint/utils/dist/ts-eslint/Rule").RuleModule<MessageIds, [], import("@typescript-eslint/utils/dist/ts-eslint/Rule").RuleListener>;
+export declare const noAlwaysTrueFalseConditions: TSESLint.RuleModule<MessageIds, [], TSESLint.RuleListener>;
 export {};

package/lib/rules/no-always-true-false-conditions.js

@@ -13,16 +13,69 @@ exports.noAlwaysTrueFalseConditions = (0, createRule_1.createRule)({
         },
         schema: [],
         messages: {
-            alwaysTrueCondition: 'This condition is always true, which may indicate a mistake or unnecessary code.',
-            alwaysFalseCondition: 'This condition is always false, which may indicate a mistake or dead code.',
+            alwaysTrueCondition: 'What\'s wrong → Condition "{{condition}}" is always true.\nWhy it matters → The guarded branch runs every time, which can hide logic errors and leave redundant checks.\nHow to fix → Remove the check, or rewrite "{{condition}}" so it depends on runtime values instead of constants.',
+            alwaysFalseCondition: 'What\'s wrong → Condition "{{condition}}" is always false.\nWhy it matters → The guarded branch is unreachable, which leaves misleading or dead code.\nHow to fix → Remove the unreachable branch, or adjust "{{condition}}" so it can evaluate to true when intended.',
         },
     },
     defaultOptions: [],
     create(context) {
+        const sourceCode = context.getSourceCode();
+        const normalizedConditionText = (node) => sourceCode.getText(node).replace(/\s+/g, ' ').trim();
+        const conditionTextFor = (node) => ({
+            condition: normalizedConditionText(node),
+        });
         // Track nodes that have already been reported to prevent duplicate reports
         const reportedNodes = new Set();
         // Track parent nodes that have been evaluated to prevent duplicate reports on children
         const evaluatedParentNodes = new Set();
+        // Sentinel distinguishes "no const literal resolved" from valid literal values (including null/undefined)
+        const NOT_FOUND = Symbol('literal-not-found');
+        /**
+         * Walks the current scope chain to locate a variable by name so identifier
+         * lookups can resolve const initializers even when declared in parent scopes.
+         */
+        function findVariableInScopes(name) {
+            let currentScope = context.getScope();
+            while (currentScope) {
+                const variable = currentScope.variables.find((variableItem) => variableItem.name === name);
+                if (variable) {
+                    return variable;
+                }
+                currentScope = currentScope.upper;
+            }
+            return undefined;
+        }
+        function isConstIdentifierDefinition(def, identifierName) {
+            return (def.type === 'Variable' &&
+                def.node.type === utils_1.AST_NODE_TYPES.VariableDeclarator &&
+                def.node.id.type === utils_1.AST_NODE_TYPES.Identifier &&
+                def.node.id.name === identifierName &&
+                def.parent?.type === utils_1.AST_NODE_TYPES.VariableDeclaration &&
+                def.parent.kind === 'const');
+        }
+        function findConstIdentifierDefinition(variable, identifierName) {
+            return variable.defs.find((def) => isConstIdentifierDefinition(def, identifierName));
+        }
+        /**
+         * Resolves an identifier to the literal it is initialized with when declared
+         * as a const. Returns the NOT_FOUND sentinel when the binding is absent,
+         * not a const, or not initialized with a literal value.
+         */
+        function resolveIdentifierValue(identifier) {
+            const variable = findVariableInScopes(identifier.name);
+            if (!variable) {
+                return NOT_FOUND;
+            }
+            const definition = findConstIdentifierDefinition(variable, identifier.name);
+            if (!definition) {
+                return NOT_FOUND;
+            }
+            const initializer = definition.node.init;
+            if (initializer?.type === utils_1.AST_NODE_TYPES.Literal) {
+                return initializer.value;
+            }
+            return NOT_FOUND;
+        }
         /**
          * Checks if a literal value is always truthy or falsy
          */
@@ -1309,6 +1362,7 @@ exports.noAlwaysTrueFalseConditions = (0, createRule_1.createRule)({
                 context.report({
                     node,
                     messageId: 'alwaysTrueCondition',
+                    data: conditionTextFor(node),
                 });
                 reportedNodes.add(node);
             }
@@ -1316,6 +1370,7 @@ exports.noAlwaysTrueFalseConditions = (0, createRule_1.createRule)({
                 context.report({
                     node,
                     messageId: 'alwaysFalseCondition',
+                    data: conditionTextFor(node),
                 });
                 reportedNodes.add(node);
             }
@@ -1372,12 +1427,14 @@ exports.noAlwaysTrueFalseConditions = (0, createRule_1.createRule)({
                                 context.report({
                                     node: node.test,
                                     messageId: 'alwaysTrueCondition',
+                                    data: conditionTextFor(node.test),
                                 });
                             }
                             else {
                                 context.report({
                                     node: node.test,
                                     messageId: 'alwaysFalseCondition',
+                                    data: conditionTextFor(node.test),
                                 });
                             }
                             reportedNodes.add(node.test);
@@ -1385,14 +1442,17 @@ exports.noAlwaysTrueFalseConditions = (0, createRule_1.createRule)({
                     }
                     // Special cases for tests with variables
                     if (switchStatement.discriminant.type === utils_1.AST_NODE_TYPES.Literal &&
-                        node.test.type === utils_1.AST_NODE_TYPES.Identifier &&
-                        node.test.name === 'value') {
-                        // These special cases match the test expectations
-                        // In a real implementation, you would want to track variable assignments
-                        if (!reportedNodes.has(node.test)) {
+                        node.test.type === utils_1.AST_NODE_TYPES.Identifier) {
+                        const identifierValue = resolveIdentifierValue(node.test);
+                        if (identifierValue !== NOT_FOUND &&
+                            !reportedNodes.has(node.test)) {
+                            const messageId = identifierValue === switchStatement.discriminant.value
+                                ? 'alwaysTrueCondition'
+                                : 'alwaysFalseCondition';
                             context.report({
                                 node: node.test,
-                                messageId: 'alwaysFalseCondition',
+                                messageId,
+                                data: conditionTextFor(node.test),
                             });
                             reportedNodes.add(node.test);
                         }

package/lib/rules/no-array-length-in-deps.js

@@ -141,7 +141,7 @@ exports.noArrayLengthInDeps = (0, createRule_1.createRule)({
     meta: {
         type: 'problem',
         docs: {
-            description: 'Prevent using array.length in React hook dependency arrays. Instead, memoize stableHash(array) with useMemo and depend on the hash.',
+            description: 'Detects array.length entries in React hook dependency arrays because length ignores content changes; auto-fixes by memoizing stableHash(array) with useMemo and depending on the hash instead.',
             recommended: 'error',
         },
         fixable: 'code',
@@ -162,7 +162,7 @@ exports.noArrayLengthInDeps = (0, createRule_1.createRule)({
             },
         ],
         messages: {
-            noArrayLengthInDeps: 'Avoid using array.length in hook dependency arrays. Use a memoized stableHash(variable) via useMemo and depend on the hash instead.',
+            noArrayLengthInDeps: 'Dependency array includes length-based entries ({{dependencies}}). Array length only changes when items are added or removed, so hooks miss updates when array contents change at the same size. Memoize a stableHash of each array with useMemo and depend on that hash so the hook reruns when contents change.',
         },
     },
     defaultOptions: [{}],
@@ -200,12 +200,18 @@ exports.noArrayLengthInDeps = (0, createRule_1.createRule)({
                 }
                 if (lengthDeps.length === 0)
                     return;
+                const sourceCode = context.getSourceCode();
+                const dependencies = lengthDeps
+                    .map(({ element }) => sourceCode.getText(element))
+                    .join(', ');
                 // Report once on the dependency array
                 context.report({
                     node: depsArg,
                     messageId: 'noArrayLengthInDeps',
+                    data: {
+                        dependencies,
+                    },
                     fix(fixer) {
-                        const sourceCode = context.getSourceCode();
                         const fixes = [];
                         const hostFn = findEnclosingFunction(node) ?? sourceCode.ast;
                         const declaredBases = ensureWeakMapEntry(perFuncDeclaredBases, hostFn, () => new Set());