@prairielearn/eslint-plugin 3.0.1 → 3.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @prairielearn/eslint-plugin
 
+## 3.1.0
+
+### Minor Changes
+
+- 174fbb4: Add `no-current-target-in-callback` lint rule to detect when `event.currentTarget` is accessed inside a nested callback within a React event handler. This pattern is problematic because React may execute callbacks asynchronously, at which point `currentTarget` may already be nullified.
+
 ## 3.0.1
 
 ### Patch Changes

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export declare const rules: {
     'aws-client-mandatory-config': import("@typescript-eslint/utils/ts-eslint").RuleModule<"missingConfig", [], unknown, import("@typescript-eslint/utils/ts-eslint").RuleListener>;
     'aws-client-shared-config': import("@typescript-eslint/utils/ts-eslint").RuleModule<"improperConfig" | "unknownConfig", [], unknown, import("@typescript-eslint/utils/ts-eslint").RuleListener>;
     'jsx-no-dollar-interpolation': import("@typescript-eslint/utils/ts-eslint").RuleModule<"dollarInterpolationNotAllowed", [], unknown, import("@typescript-eslint/utils/ts-eslint").RuleListener>;
+    'no-current-target-in-callback': import("@typescript-eslint/utils/ts-eslint").RuleModule<"noCurrentTargetInCallback", [], unknown, import("@typescript-eslint/utils/ts-eslint").RuleListener>;
     'no-unused-sql-blocks': import("@typescript-eslint/utils/ts-eslint").RuleModule<"unusedSqlBlock", [], unknown, import("@typescript-eslint/utils/ts-eslint").RuleListener>;
     'safe-db-types': import("@typescript-eslint/utils/ts-eslint").RuleModule<"spreadAttributes" | "unsafeTypes", [({
         allowDbTypes?: (string | RegExp)[] | undefined;

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,KAAK;;;;;;;;CAMjB,CAAC","sourcesContent":["import awsClientMandatoryConfig from './rules/aws-client-mandatory-config.js';\nimport awsClientSharedConfig from './rules/aws-client-shared-config.js';\nimport jsxNoDollarInterpolation from './rules/jsx-no-dollar-interpolation.js';\nimport noUnusedSqlBlocks from './rules/no-unused-sql-blocks.js';\nimport safeDbTypes from './rules/safe-db-types.js';\n\nexport const rules = {\n  'aws-client-mandatory-config': awsClientMandatoryConfig,\n  'aws-client-shared-config': awsClientSharedConfig,\n  'jsx-no-dollar-interpolation': jsxNoDollarInterpolation,\n  'no-unused-sql-blocks': noUnusedSqlBlocks,\n  'safe-db-types': safeDbTypes,\n};\n"]}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,KAAK;;;;;;;;;CAOjB,CAAC","sourcesContent":["import awsClientMandatoryConfig from './rules/aws-client-mandatory-config.js';\nimport awsClientSharedConfig from './rules/aws-client-shared-config.js';\nimport jsxNoDollarInterpolation from './rules/jsx-no-dollar-interpolation.js';\nimport noCurrentTargetInCallback from './rules/no-current-target-in-callback.js';\nimport noUnusedSqlBlocks from './rules/no-unused-sql-blocks.js';\nimport safeDbTypes from './rules/safe-db-types.js';\n\nexport const rules = {\n  'aws-client-mandatory-config': awsClientMandatoryConfig,\n  'aws-client-shared-config': awsClientSharedConfig,\n  'jsx-no-dollar-interpolation': jsxNoDollarInterpolation,\n  'no-current-target-in-callback': noCurrentTargetInCallback,\n  'no-unused-sql-blocks': noUnusedSqlBlocks,\n  'safe-db-types': safeDbTypes,\n};\n"]}

package/dist/index.js

@@ -7,12 +7,14 @@ exports.rules = void 0;
 const aws_client_mandatory_config_js_1 = __importDefault(require("./rules/aws-client-mandatory-config.js"));
 const aws_client_shared_config_js_1 = __importDefault(require("./rules/aws-client-shared-config.js"));
 const jsx_no_dollar_interpolation_js_1 = __importDefault(require("./rules/jsx-no-dollar-interpolation.js"));
+const no_current_target_in_callback_js_1 = __importDefault(require("./rules/no-current-target-in-callback.js"));
 const no_unused_sql_blocks_js_1 = __importDefault(require("./rules/no-unused-sql-blocks.js"));
 const safe_db_types_js_1 = __importDefault(require("./rules/safe-db-types.js"));
 exports.rules = {
     'aws-client-mandatory-config': aws_client_mandatory_config_js_1.default,
     'aws-client-shared-config': aws_client_shared_config_js_1.default,
     'jsx-no-dollar-interpolation': jsx_no_dollar_interpolation_js_1.default,
+    'no-current-target-in-callback': no_current_target_in_callback_js_1.default,
     'no-unused-sql-blocks': no_unused_sql_blocks_js_1.default,
     'safe-db-types': safe_db_types_js_1.default,
 };

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,4GAA8E;AAC9E,sGAAwE;AACxE,4GAA8E;AAC9E,8FAAgE;AAChE,gFAAmD;AAEtC,QAAA,KAAK,GAAG;IACnB,6BAA6B,EAAE,wCAAwB;IACvD,0BAA0B,EAAE,qCAAqB;IACjD,6BAA6B,EAAE,wCAAwB;IACvD,sBAAsB,EAAE,iCAAiB;IACzC,eAAe,EAAE,0BAAW;CAC7B,CAAC","sourcesContent":["import awsClientMandatoryConfig from './rules/aws-client-mandatory-config.js';\nimport awsClientSharedConfig from './rules/aws-client-shared-config.js';\nimport jsxNoDollarInterpolation from './rules/jsx-no-dollar-interpolation.js';\nimport noUnusedSqlBlocks from './rules/no-unused-sql-blocks.js';\nimport safeDbTypes from './rules/safe-db-types.js';\n\nexport const rules = {\n  'aws-client-mandatory-config': awsClientMandatoryConfig,\n  'aws-client-shared-config': awsClientSharedConfig,\n  'jsx-no-dollar-interpolation': jsxNoDollarInterpolation,\n  'no-unused-sql-blocks': noUnusedSqlBlocks,\n  'safe-db-types': safeDbTypes,\n};\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,4GAA8E;AAC9E,sGAAwE;AACxE,4GAA8E;AAC9E,gHAAiF;AACjF,8FAAgE;AAChE,gFAAmD;AAEtC,QAAA,KAAK,GAAG;IACnB,6BAA6B,EAAE,wCAAwB;IACvD,0BAA0B,EAAE,qCAAqB;IACjD,6BAA6B,EAAE,wCAAwB;IACvD,+BAA+B,EAAE,0CAAyB;IAC1D,sBAAsB,EAAE,iCAAiB;IACzC,eAAe,EAAE,0BAAW;CAC7B,CAAC","sourcesContent":["import awsClientMandatoryConfig from './rules/aws-client-mandatory-config.js';\nimport awsClientSharedConfig from './rules/aws-client-shared-config.js';\nimport jsxNoDollarInterpolation from './rules/jsx-no-dollar-interpolation.js';\nimport noCurrentTargetInCallback from './rules/no-current-target-in-callback.js';\nimport noUnusedSqlBlocks from './rules/no-unused-sql-blocks.js';\nimport safeDbTypes from './rules/safe-db-types.js';\n\nexport const rules = {\n  'aws-client-mandatory-config': awsClientMandatoryConfig,\n  'aws-client-shared-config': awsClientSharedConfig,\n  'jsx-no-dollar-interpolation': jsxNoDollarInterpolation,\n  'no-current-target-in-callback': noCurrentTargetInCallback,\n  'no-unused-sql-blocks': noUnusedSqlBlocks,\n  'safe-db-types': safeDbTypes,\n};\n"]}

package/dist/rules/no-current-target-in-callback.d.ts

@@ -0,0 +1,20 @@
+import { ESLintUtils } from '@typescript-eslint/utils';
+/**
+ * This rule detects when `event.currentTarget` is accessed inside a nested
+ * callback function within a React event handler. This is problematic because
+ * React may execute callbacks (like those passed to setState) asynchronously,
+ * at which point `currentTarget` may already be nullified.
+ *
+ * Bad:
+ * ```tsx
+ * onChange={(e) => setChecks((c) => ({ ...c, value: e.currentTarget.checked }))}
+ * ```
+ *
+ * Good:
+ * ```tsx
+ * onChange={({ currentTarget }) => setChecks((c) => ({ ...c, value: currentTarget.checked }))}
+ * ```
+ */
+declare const _default: ESLintUtils.RuleModule<"noCurrentTargetInCallback", [], unknown, ESLintUtils.RuleListener>;
+export default _default;
+//# sourceMappingURL=no-current-target-in-callback.d.ts.map

package/dist/rules/no-current-target-in-callback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"no-current-target-in-callback.d.ts","sourceRoot":"","sources":["../../src/rules/no-current-target-in-callback.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAiB,MAAM,0BAA0B,CAAC;AAEtE;;;;;;;;;;;;;;;GAeG;;AACH,wBA8JG","sourcesContent":["import { ESLintUtils, type TSESTree } from '@typescript-eslint/utils';\n\n/**\n * This rule detects when `event.currentTarget` is accessed inside a nested\n * callback function within a React event handler. This is problematic because\n * React may execute callbacks (like those passed to setState) asynchronously,\n * at which point `currentTarget` may already be nullified.\n *\n * Bad:\n * ```tsx\n * onChange={(e) => setChecks((c) => ({ ...c, value: e.currentTarget.checked }))}\n * ```\n *\n * Good:\n * ```tsx\n * onChange={({ currentTarget }) => setChecks((c) => ({ ...c, value: currentTarget.checked }))}\n * ```\n */\nexport default ESLintUtils.RuleCreator.withoutDocs({\n  meta: {\n    type: 'problem',\n    messages: {\n      noCurrentTargetInCallback:\n        'Accessing event.currentTarget inside a callback may fail because currentTarget can be nullified before the callback runs. Destructure currentTarget at the start of the event handler instead.',\n    },\n    schema: [],\n  },\n  defaultOptions: [],\n\n  create(context) {\n    // Track event handler parameters and their scopes\n    const eventHandlerParams = new Map<TSESTree.Node, TSESTree.Identifier>();\n\n    /** Check if a node is inside a nested function relative to the event handler */\n    function isInsideNestedFunction(\n      node: TSESTree.Node,\n      eventHandlerFunction: TSESTree.Node,\n    ): boolean {\n      let current: TSESTree.Node | undefined = node.parent;\n      let foundNestedFunction = false;\n\n      while (current && current !== eventHandlerFunction) {\n        if (\n          current.type === 'ArrowFunctionExpression' ||\n          current.type === 'FunctionExpression' ||\n          current.type === 'FunctionDeclaration'\n        ) {\n          foundNestedFunction = true;\n        }\n        current = current.parent;\n      }\n\n      return foundNestedFunction && current === eventHandlerFunction;\n    }\n\n    /** Find the function that contains this node */\n    function findContainingFunction(\n      node: TSESTree.Node,\n    ): TSESTree.ArrowFunctionExpression | TSESTree.FunctionExpression | null {\n      let current: TSESTree.Node | undefined = node.parent;\n\n      while (current) {\n        if (current.type === 'ArrowFunctionExpression' || current.type === 'FunctionExpression') {\n          return current;\n        }\n        current = current.parent;\n      }\n\n      return null;\n    }\n\n    /** Check if a function is a JSX event handler */\n    function isJSXEventHandler(\n      func: TSESTree.ArrowFunctionExpression | TSESTree.FunctionExpression,\n    ): boolean {\n      const parent = func.parent;\n\n      // Check for JSX attribute like onChange={...}\n      if (parent?.type === 'JSXExpressionContainer') {\n        const jsxAttribute = parent.parent;\n        if (jsxAttribute?.type === 'JSXAttribute') {\n          const attrName = jsxAttribute.name.type === 'JSXIdentifier' ? jsxAttribute.name.name : '';\n          // Match common event handler patterns\n          return /^on[A-Z]/.test(attrName);\n        }\n      }\n\n      return false;\n    }\n\n    /** Get the first parameter of an event handler if it looks like an event */\n    function getEventParameter(\n      func: TSESTree.ArrowFunctionExpression | TSESTree.FunctionExpression,\n    ): TSESTree.Identifier | null {\n      const firstParam = func.params[0];\n\n      if (!firstParam) return null;\n\n      // Simple identifier parameter like (e) => ...\n      if (firstParam.type === 'Identifier') {\n        return firstParam;\n      }\n\n      return null;\n    }\n\n    return {\n      // When we enter a JSX event handler, track its event parameter\n      'JSXAttribute > JSXExpressionContainer > ArrowFunctionExpression': (\n        node: TSESTree.ArrowFunctionExpression,\n      ) => {\n        if (isJSXEventHandler(node)) {\n          const eventParam = getEventParameter(node);\n          if (eventParam) {\n            eventHandlerParams.set(node, eventParam);\n          }\n        }\n      },\n      'JSXAttribute > JSXExpressionContainer > FunctionExpression': (\n        node: TSESTree.FunctionExpression,\n      ) => {\n        if (isJSXEventHandler(node)) {\n          const eventParam = getEventParameter(node);\n          if (eventParam) {\n            eventHandlerParams.set(node, eventParam);\n          }\n        }\n      },\n\n      // Check for .currentTarget access\n      MemberExpression(node) {\n        // Only check for .currentTarget property access\n        if (node.property.type !== 'Identifier' || node.property.name !== 'currentTarget') {\n          return;\n        }\n\n        // Check if the object is an identifier (like `e` in `e.currentTarget`)\n        if (node.object.type !== 'Identifier') {\n          return;\n        }\n\n        const objectName = node.object.name;\n\n        // Find the containing function\n        const containingFunction = findContainingFunction(node);\n        if (!containingFunction) return;\n\n        // Check each tracked event handler to see if this access is problematic\n        for (const [eventHandler, eventParam] of eventHandlerParams) {\n          // Check if this is accessing the event parameter\n          if (objectName !== eventParam.name) continue;\n\n          // Check if the access is inside a nested function within the event handler\n          if (isInsideNestedFunction(node, eventHandler)) {\n            context.report({\n              node,\n              messageId: 'noCurrentTargetInCallback',\n            });\n            return;\n          }\n        }\n      },\n\n      // Clean up when leaving event handlers\n      'JSXAttribute > JSXExpressionContainer > ArrowFunctionExpression:exit': (\n        node: TSESTree.ArrowFunctionExpression,\n      ) => {\n        eventHandlerParams.delete(node);\n      },\n      'JSXAttribute > JSXExpressionContainer > FunctionExpression:exit': (\n        node: TSESTree.FunctionExpression,\n      ) => {\n        eventHandlerParams.delete(node);\n      },\n    };\n  },\n});\n"]}

package/dist/rules/no-current-target-in-callback.js

@@ -0,0 +1,140 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const utils_1 = require("@typescript-eslint/utils");
+/**
+ * This rule detects when `event.currentTarget` is accessed inside a nested
+ * callback function within a React event handler. This is problematic because
+ * React may execute callbacks (like those passed to setState) asynchronously,
+ * at which point `currentTarget` may already be nullified.
+ *
+ * Bad:
+ * ```tsx
+ * onChange={(e) => setChecks((c) => ({ ...c, value: e.currentTarget.checked }))}
+ * ```
+ *
+ * Good:
+ * ```tsx
+ * onChange={({ currentTarget }) => setChecks((c) => ({ ...c, value: currentTarget.checked }))}
+ * ```
+ */
+exports.default = utils_1.ESLintUtils.RuleCreator.withoutDocs({
+    meta: {
+        type: 'problem',
+        messages: {
+            noCurrentTargetInCallback: 'Accessing event.currentTarget inside a callback may fail because currentTarget can be nullified before the callback runs. Destructure currentTarget at the start of the event handler instead.',
+        },
+        schema: [],
+    },
+    defaultOptions: [],
+    create(context) {
+        // Track event handler parameters and their scopes
+        const eventHandlerParams = new Map();
+        /** Check if a node is inside a nested function relative to the event handler */
+        function isInsideNestedFunction(node, eventHandlerFunction) {
+            let current = node.parent;
+            let foundNestedFunction = false;
+            while (current && current !== eventHandlerFunction) {
+                if (current.type === 'ArrowFunctionExpression' ||
+                    current.type === 'FunctionExpression' ||
+                    current.type === 'FunctionDeclaration') {
+                    foundNestedFunction = true;
+                }
+                current = current.parent;
+            }
+            return foundNestedFunction && current === eventHandlerFunction;
+        }
+        /** Find the function that contains this node */
+        function findContainingFunction(node) {
+            let current = node.parent;
+            while (current) {
+                if (current.type === 'ArrowFunctionExpression' || current.type === 'FunctionExpression') {
+                    return current;
+                }
+                current = current.parent;
+            }
+            return null;
+        }
+        /** Check if a function is a JSX event handler */
+        function isJSXEventHandler(func) {
+            const parent = func.parent;
+            // Check for JSX attribute like onChange={...}
+            if (parent?.type === 'JSXExpressionContainer') {
+                const jsxAttribute = parent.parent;
+                if (jsxAttribute?.type === 'JSXAttribute') {
+                    const attrName = jsxAttribute.name.type === 'JSXIdentifier' ? jsxAttribute.name.name : '';
+                    // Match common event handler patterns
+                    return /^on[A-Z]/.test(attrName);
+                }
+            }
+            return false;
+        }
+        /** Get the first parameter of an event handler if it looks like an event */
+        function getEventParameter(func) {
+            const firstParam = func.params[0];
+            if (!firstParam)
+                return null;
+            // Simple identifier parameter like (e) => ...
+            if (firstParam.type === 'Identifier') {
+                return firstParam;
+            }
+            return null;
+        }
+        return {
+            // When we enter a JSX event handler, track its event parameter
+            'JSXAttribute > JSXExpressionContainer > ArrowFunctionExpression': (node) => {
+                if (isJSXEventHandler(node)) {
+                    const eventParam = getEventParameter(node);
+                    if (eventParam) {
+                        eventHandlerParams.set(node, eventParam);
+                    }
+                }
+            },
+            'JSXAttribute > JSXExpressionContainer > FunctionExpression': (node) => {
+                if (isJSXEventHandler(node)) {
+                    const eventParam = getEventParameter(node);
+                    if (eventParam) {
+                        eventHandlerParams.set(node, eventParam);
+                    }
+                }
+            },
+            // Check for .currentTarget access
+            MemberExpression(node) {
+                // Only check for .currentTarget property access
+                if (node.property.type !== 'Identifier' || node.property.name !== 'currentTarget') {
+                    return;
+                }
+                // Check if the object is an identifier (like `e` in `e.currentTarget`)
+                if (node.object.type !== 'Identifier') {
+                    return;
+                }
+                const objectName = node.object.name;
+                // Find the containing function
+                const containingFunction = findContainingFunction(node);
+                if (!containingFunction)
+                    return;
+                // Check each tracked event handler to see if this access is problematic
+                for (const [eventHandler, eventParam] of eventHandlerParams) {
+                    // Check if this is accessing the event parameter
+                    if (objectName !== eventParam.name)
+                        continue;
+                    // Check if the access is inside a nested function within the event handler
+                    if (isInsideNestedFunction(node, eventHandler)) {
+                        context.report({
+                            node,
+                            messageId: 'noCurrentTargetInCallback',
+                        });
+                        return;
+                    }
+                }
+            },
+            // Clean up when leaving event handlers
+            'JSXAttribute > JSXExpressionContainer > ArrowFunctionExpression:exit': (node) => {
+                eventHandlerParams.delete(node);
+            },
+            'JSXAttribute > JSXExpressionContainer > FunctionExpression:exit': (node) => {
+                eventHandlerParams.delete(node);
+            },
+        };
+    },
+});
+//# sourceMappingURL=no-current-target-in-callback.js.map

package/dist/rules/no-current-target-in-callback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"no-current-target-in-callback.js","sourceRoot":"","sources":["../../src/rules/no-current-target-in-callback.ts"],"names":[],"mappings":"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","sourcesContent":["import { ESLintUtils, type TSESTree } from '@typescript-eslint/utils';\n\n/**\n * This rule detects when `event.currentTarget` is accessed inside a nested\n * callback function within a React event handler. This is problematic because\n * React may execute callbacks (like those passed to setState) asynchronously,\n * at which point `currentTarget` may already be nullified.\n *\n * Bad:\n * ```tsx\n * onChange={(e) => setChecks((c) => ({ ...c, value: e.currentTarget.checked }))}\n * ```\n *\n * Good:\n * ```tsx\n * onChange={({ currentTarget }) => setChecks((c) => ({ ...c, value: currentTarget.checked }))}\n * ```\n */\nexport default ESLintUtils.RuleCreator.withoutDocs({\n  meta: {\n    type: 'problem',\n    messages: {\n      noCurrentTargetInCallback:\n        'Accessing event.currentTarget inside a callback may fail because currentTarget can be nullified before the callback runs. Destructure currentTarget at the start of the event handler instead.',\n    },\n    schema: [],\n  },\n  defaultOptions: [],\n\n  create(context) {\n    // Track event handler parameters and their scopes\n    const eventHandlerParams = new Map<TSESTree.Node, TSESTree.Identifier>();\n\n    /** Check if a node is inside a nested function relative to the event handler */\n    function isInsideNestedFunction(\n      node: TSESTree.Node,\n      eventHandlerFunction: TSESTree.Node,\n    ): boolean {\n      let current: TSESTree.Node | undefined = node.parent;\n      let foundNestedFunction = false;\n\n      while (current && current !== eventHandlerFunction) {\n        if (\n          current.type === 'ArrowFunctionExpression' ||\n          current.type === 'FunctionExpression' ||\n          current.type === 'FunctionDeclaration'\n        ) {\n          foundNestedFunction = true;\n        }\n        current = current.parent;\n      }\n\n      return foundNestedFunction && current === eventHandlerFunction;\n    }\n\n    /** Find the function that contains this node */\n    function findContainingFunction(\n      node: TSESTree.Node,\n    ): TSESTree.ArrowFunctionExpression | TSESTree.FunctionExpression | null {\n      let current: TSESTree.Node | undefined = node.parent;\n\n      while (current) {\n        if (current.type === 'ArrowFunctionExpression' || current.type === 'FunctionExpression') {\n          return current;\n        }\n        current = current.parent;\n      }\n\n      return null;\n    }\n\n    /** Check if a function is a JSX event handler */\n    function isJSXEventHandler(\n      func: TSESTree.ArrowFunctionExpression | TSESTree.FunctionExpression,\n    ): boolean {\n      const parent = func.parent;\n\n      // Check for JSX attribute like onChange={...}\n      if (parent?.type === 'JSXExpressionContainer') {\n        const jsxAttribute = parent.parent;\n        if (jsxAttribute?.type === 'JSXAttribute') {\n          const attrName = jsxAttribute.name.type === 'JSXIdentifier' ? jsxAttribute.name.name : '';\n          // Match common event handler patterns\n          return /^on[A-Z]/.test(attrName);\n        }\n      }\n\n      return false;\n    }\n\n    /** Get the first parameter of an event handler if it looks like an event */\n    function getEventParameter(\n      func: TSESTree.ArrowFunctionExpression | TSESTree.FunctionExpression,\n    ): TSESTree.Identifier | null {\n      const firstParam = func.params[0];\n\n      if (!firstParam) return null;\n\n      // Simple identifier parameter like (e) => ...\n      if (firstParam.type === 'Identifier') {\n        return firstParam;\n      }\n\n      return null;\n    }\n\n    return {\n      // When we enter a JSX event handler, track its event parameter\n      'JSXAttribute > JSXExpressionContainer > ArrowFunctionExpression': (\n        node: TSESTree.ArrowFunctionExpression,\n      ) => {\n        if (isJSXEventHandler(node)) {\n          const eventParam = getEventParameter(node);\n          if (eventParam) {\n            eventHandlerParams.set(node, eventParam);\n          }\n        }\n      },\n      'JSXAttribute > JSXExpressionContainer > FunctionExpression': (\n        node: TSESTree.FunctionExpression,\n      ) => {\n        if (isJSXEventHandler(node)) {\n          const eventParam = getEventParameter(node);\n          if (eventParam) {\n            eventHandlerParams.set(node, eventParam);\n          }\n        }\n      },\n\n      // Check for .currentTarget access\n      MemberExpression(node) {\n        // Only check for .currentTarget property access\n        if (node.property.type !== 'Identifier' || node.property.name !== 'currentTarget') {\n          return;\n        }\n\n        // Check if the object is an identifier (like `e` in `e.currentTarget`)\n        if (node.object.type !== 'Identifier') {\n          return;\n        }\n\n        const objectName = node.object.name;\n\n        // Find the containing function\n        const containingFunction = findContainingFunction(node);\n        if (!containingFunction) return;\n\n        // Check each tracked event handler to see if this access is problematic\n        for (const [eventHandler, eventParam] of eventHandlerParams) {\n          // Check if this is accessing the event parameter\n          if (objectName !== eventParam.name) continue;\n\n          // Check if the access is inside a nested function within the event handler\n          if (isInsideNestedFunction(node, eventHandler)) {\n            context.report({\n              node,\n              messageId: 'noCurrentTargetInCallback',\n            });\n            return;\n          }\n        }\n      },\n\n      // Clean up when leaving event handlers\n      'JSXAttribute > JSXExpressionContainer > ArrowFunctionExpression:exit': (\n        node: TSESTree.ArrowFunctionExpression,\n      ) => {\n        eventHandlerParams.delete(node);\n      },\n      'JSXAttribute > JSXExpressionContainer > FunctionExpression:exit': (\n        node: TSESTree.FunctionExpression,\n      ) => {\n        eventHandlerParams.delete(node);\n      },\n    };\n  },\n});\n"]}

package/dist/tests/no-current-target-in-callback.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=no-current-target-in-callback.test.d.ts.map

package/dist/tests/no-current-target-in-callback.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"no-current-target-in-callback.test.d.ts","sourceRoot":"","sources":["../../src/tests/no-current-target-in-callback.test.ts"],"names":[],"mappings":"","sourcesContent":["import { RuleTester } from '@typescript-eslint/rule-tester';\nimport { afterAll, describe, it } from 'vitest';\n\nimport rule from '../rules/no-current-target-in-callback.js';\n\nRuleTester.afterAll = afterAll;\nRuleTester.describe = describe;\nRuleTester.it = it;\n\nconst ruleTester = new RuleTester({\n  languageOptions: {\n    parserOptions: {\n      ecmaFeatures: {\n        jsx: true,\n      },\n    },\n  },\n});\n\nruleTester.run('no-current-target-in-callback', rule, {\n  valid: [\n    // Direct access to currentTarget (no nesting) is fine\n    {\n      code: '<input onChange={(e) => console.log(e.currentTarget.value)} />',\n    },\n    // Destructuring at the handler level is the recommended pattern\n    {\n      code: '<input onChange={({ currentTarget }) => setChecks((c) => ({ ...c, value: currentTarget.checked }))} />',\n    },\n    // Using a local variable is fine\n    {\n      code: `<input onChange={(e) => {\n        const target = e.currentTarget;\n        setChecks((c) => ({ ...c, value: target.checked }));\n      }} />`,\n    },\n    // Non-event handlers are not checked\n    {\n      code: '<Component render={(e) => setFoo(() => e.currentTarget)} />',\n    },\n    // Direct setState without callback\n    {\n      code: '<input onChange={(e) => setChecks({ value: e.currentTarget.checked })} />',\n    },\n    // Event target (not currentTarget) - different issue, not covered by this rule\n    {\n      code: '<input onChange={(e) => setChecks((c) => ({ ...c, value: e.target.checked }))} />',\n    },\n  ],\n  invalid: [\n    // Basic case: accessing e.currentTarget inside setState callback\n    {\n      code: '<input onChange={(e) => setChecks((c) => ({ ...c, value: e.currentTarget.checked }))} />',\n      errors: [{ messageId: 'noCurrentTargetInCallback' }],\n    },\n    // Multiple accesses\n    {\n      code: `<input onChange={(e) => setChecks((c) => ({\n        ...c,\n        value: e.currentTarget.checked,\n        name: e.currentTarget.name\n      }))} />`,\n      errors: [\n        { messageId: 'noCurrentTargetInCallback' },\n        { messageId: 'noCurrentTargetInCallback' },\n      ],\n    },\n    // Different event parameter names\n    {\n      code: '<input onChange={(event) => setChecks((c) => ({ ...c, value: event.currentTarget.checked }))} />',\n      errors: [{ messageId: 'noCurrentTargetInCallback' }],\n    },\n    {\n      code: '<input onChange={(evt) => setChecks((c) => ({ ...c, value: evt.currentTarget.checked }))} />',\n      errors: [{ messageId: 'noCurrentTargetInCallback' }],\n    },\n    // onClick handler\n    {\n      code: '<button onClick={(e) => setFoo((prev) => ({ ...prev, clicked: e.currentTarget.id }))} />',\n      errors: [{ messageId: 'noCurrentTargetInCallback' }],\n    },\n    // Nested arrow function in array method\n    {\n      code: '<input onChange={(e) => items.map(() => e.currentTarget.value)} />',\n      errors: [{ messageId: 'noCurrentTargetInCallback' }],\n    },\n    // Function expression callback\n    {\n      code: '<input onChange={(e) => setChecks(function(c) { return { ...c, value: e.currentTarget.checked }; })} />',\n      errors: [{ messageId: 'noCurrentTargetInCallback' }],\n    },\n    // Deeply nested\n    {\n      code: '<input onChange={(e) => outer(() => inner(() => e.currentTarget.value))} />',\n      errors: [{ messageId: 'noCurrentTargetInCallback' }],\n    },\n    // With block body\n    {\n      code: `<input onChange={(e) => {\n        setChecks((c) => {\n          return { ...c, value: e.currentTarget.checked };\n        });\n      }} />`,\n      errors: [{ messageId: 'noCurrentTargetInCallback' }],\n    },\n  ],\n});\n"]}

package/dist/tests/no-current-target-in-callback.test.js

@@ -0,0 +1,109 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const rule_tester_1 = require("@typescript-eslint/rule-tester");
+const vitest_1 = require("vitest");
+const no_current_target_in_callback_js_1 = __importDefault(require("../rules/no-current-target-in-callback.js"));
+rule_tester_1.RuleTester.afterAll = vitest_1.afterAll;
+rule_tester_1.RuleTester.describe = vitest_1.describe;
+rule_tester_1.RuleTester.it = vitest_1.it;
+const ruleTester = new rule_tester_1.RuleTester({
+    languageOptions: {
+        parserOptions: {
+            ecmaFeatures: {
+                jsx: true,
+            },
+        },
+    },
+});
+ruleTester.run('no-current-target-in-callback', no_current_target_in_callback_js_1.default, {
+    valid: [
+        // Direct access to currentTarget (no nesting) is fine
+        {
+            code: '<input onChange={(e) => console.log(e.currentTarget.value)} />',
+        },
+        // Destructuring at the handler level is the recommended pattern
+        {
+            code: '<input onChange={({ currentTarget }) => setChecks((c) => ({ ...c, value: currentTarget.checked }))} />',
+        },
+        // Using a local variable is fine
+        {
+            code: `<input onChange={(e) => {
+        const target = e.currentTarget;
+        setChecks((c) => ({ ...c, value: target.checked }));
+      }} />`,
+        },
+        // Non-event handlers are not checked
+        {
+            code: '<Component render={(e) => setFoo(() => e.currentTarget)} />',
+        },
+        // Direct setState without callback
+        {
+            code: '<input onChange={(e) => setChecks({ value: e.currentTarget.checked })} />',
+        },
+        // Event target (not currentTarget) - different issue, not covered by this rule
+        {
+            code: '<input onChange={(e) => setChecks((c) => ({ ...c, value: e.target.checked }))} />',
+        },
+    ],
+    invalid: [
+        // Basic case: accessing e.currentTarget inside setState callback
+        {
+            code: '<input onChange={(e) => setChecks((c) => ({ ...c, value: e.currentTarget.checked }))} />',
+            errors: [{ messageId: 'noCurrentTargetInCallback' }],
+        },
+        // Multiple accesses
+        {
+            code: `<input onChange={(e) => setChecks((c) => ({
+        ...c,
+        value: e.currentTarget.checked,
+        name: e.currentTarget.name
+      }))} />`,
+            errors: [
+                { messageId: 'noCurrentTargetInCallback' },
+                { messageId: 'noCurrentTargetInCallback' },
+            ],
+        },
+        // Different event parameter names
+        {
+            code: '<input onChange={(event) => setChecks((c) => ({ ...c, value: event.currentTarget.checked }))} />',
+            errors: [{ messageId: 'noCurrentTargetInCallback' }],
+        },
+        {
+            code: '<input onChange={(evt) => setChecks((c) => ({ ...c, value: evt.currentTarget.checked }))} />',
+            errors: [{ messageId: 'noCurrentTargetInCallback' }],
+        },
+        // onClick handler
+        {
+            code: '<button onClick={(e) => setFoo((prev) => ({ ...prev, clicked: e.currentTarget.id }))} />',
+            errors: [{ messageId: 'noCurrentTargetInCallback' }],
+        },
+        // Nested arrow function in array method
+        {
+            code: '<input onChange={(e) => items.map(() => e.currentTarget.value)} />',
+            errors: [{ messageId: 'noCurrentTargetInCallback' }],
+        },
+        // Function expression callback
+        {
+            code: '<input onChange={(e) => setChecks(function(c) { return { ...c, value: e.currentTarget.checked }; })} />',
+            errors: [{ messageId: 'noCurrentTargetInCallback' }],
+        },
+        // Deeply nested
+        {
+            code: '<input onChange={(e) => outer(() => inner(() => e.currentTarget.value))} />',
+            errors: [{ messageId: 'noCurrentTargetInCallback' }],
+        },
+        // With block body
+        {
+            code: `<input onChange={(e) => {
+        setChecks((c) => {
+          return { ...c, value: e.currentTarget.checked };
+        });
+      }} />`,
+            errors: [{ messageId: 'noCurrentTargetInCallback' }],
+        },
+    ],
+});
+//# sourceMappingURL=no-current-target-in-callback.test.js.map

package/dist/tests/no-current-target-in-callback.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"no-current-target-in-callback.test.js","sourceRoot":"","sources":["../../src/tests/no-current-target-in-callback.test.ts"],"names":[],"mappings":";;;;;AAAA,gEAA4D;AAC5D,mCAAgD;AAEhD,iHAA6D;AAE7D,wBAAU,CAAC,QAAQ,GAAG,iBAAQ,CAAC;AAC/B,wBAAU,CAAC,QAAQ,GAAG,iBAAQ,CAAC;AAC/B,wBAAU,CAAC,EAAE,GAAG,WAAE,CAAC;AAEnB,MAAM,UAAU,GAAG,IAAI,wBAAU,CAAC;IAChC,eAAe,EAAE;QACf,aAAa,EAAE;YACb,YAAY,EAAE;gBACZ,GAAG,EAAE,IAAI;aACV;SACF;KACF;CACF,CAAC,CAAC;AAEH,UAAU,CAAC,GAAG,CAAC,+BAA+B,EAAE,0CAAI,EAAE;IACpD,KAAK,EAAE;QACL,sDAAsD;QACtD;YACE,IAAI,EAAE,gEAAgE;SACvE;QACD,gEAAgE;QAChE;YACE,IAAI,EAAE,wGAAwG;SAC/G;QACD,iCAAiC;QACjC;YACE,IAAI,EAAE;;;YAGA;SACP;QACD,qCAAqC;QACrC;YACE,IAAI,EAAE,6DAA6D;SACpE;QACD,mCAAmC;QACnC;YACE,IAAI,EAAE,2EAA2E;SAClF;QACD,+EAA+E;QAC/E;YACE,IAAI,EAAE,mFAAmF;SAC1F;KACF;IACD,OAAO,EAAE;QACP,iEAAiE;QACjE;YACE,IAAI,EAAE,0FAA0F;YAChG,MAAM,EAAE,CAAC,EAAE,SAAS,EAAE,2BAA2B,EAAE,CAAC;SACrD;QACD,oBAAoB;QACpB;YACE,IAAI,EAAE;;;;cAIE;YACR,MAAM,EAAE;gBACN,EAAE,SAAS,EAAE,2BAA2B,EAAE;gBAC1C,EAAE,SAAS,EAAE,2BAA2B,EAAE;aAC3C;SACF;QACD,kCAAkC;QAClC;YACE,IAAI,EAAE,kGAAkG;YACxG,MAAM,EAAE,CAAC,EAAE,SAAS,EAAE,2BAA2B,EAAE,CAAC;SACrD;QACD;YACE,IAAI,EAAE,8FAA8F;YACpG,MAAM,EAAE,CAAC,EAAE,SAAS,EAAE,2BAA2B,EAAE,CAAC;SACrD;QACD,kBAAkB;QAClB;YACE,IAAI,EAAE,0FAA0F;YAChG,MAAM,EAAE,CAAC,EAAE,SAAS,EAAE,2BAA2B,EAAE,CAAC;SACrD;QACD,wCAAwC;QACxC;YACE,IAAI,EAAE,oEAAoE;YAC1E,MAAM,EAAE,CAAC,EAAE,SAAS,EAAE,2BAA2B,EAAE,CAAC;SACrD;QACD,+BAA+B;QAC/B;YACE,IAAI,EAAE,yGAAyG;YAC/G,MAAM,EAAE,CAAC,EAAE,SAAS,EAAE,2BAA2B,EAAE,CAAC;SACrD;QACD,gBAAgB;QAChB;YACE,IAAI,EAAE,6EAA6E;YACnF,MAAM,EAAE,CAAC,EAAE,SAAS,EAAE,2BAA2B,EAAE,CAAC;SACrD;QACD,kBAAkB;QAClB;YACE,IAAI,EAAE;;;;YAIA;YACN,MAAM,EAAE,CAAC,EAAE,SAAS,EAAE,2BAA2B,EAAE,CAAC;SACrD;KACF;CACF,CAAC,CAAC","sourcesContent":["import { RuleTester } from '@typescript-eslint/rule-tester';\nimport { afterAll, describe, it } from 'vitest';\n\nimport rule from '../rules/no-current-target-in-callback.js';\n\nRuleTester.afterAll = afterAll;\nRuleTester.describe = describe;\nRuleTester.it = it;\n\nconst ruleTester = new RuleTester({\n  languageOptions: {\n    parserOptions: {\n      ecmaFeatures: {\n        jsx: true,\n      },\n    },\n  },\n});\n\nruleTester.run('no-current-target-in-callback', rule, {\n  valid: [\n    // Direct access to currentTarget (no nesting) is fine\n    {\n      code: '<input onChange={(e) => console.log(e.currentTarget.value)} />',\n    },\n    // Destructuring at the handler level is the recommended pattern\n    {\n      code: '<input onChange={({ currentTarget }) => setChecks((c) => ({ ...c, value: currentTarget.checked }))} />',\n    },\n    // Using a local variable is fine\n    {\n      code: `<input onChange={(e) => {\n        const target = e.currentTarget;\n        setChecks((c) => ({ ...c, value: target.checked }));\n      }} />`,\n    },\n    // Non-event handlers are not checked\n    {\n      code: '<Component render={(e) => setFoo(() => e.currentTarget)} />',\n    },\n    // Direct setState without callback\n    {\n      code: '<input onChange={(e) => setChecks({ value: e.currentTarget.checked })} />',\n    },\n    // Event target (not currentTarget) - different issue, not covered by this rule\n    {\n      code: '<input onChange={(e) => setChecks((c) => ({ ...c, value: e.target.checked }))} />',\n    },\n  ],\n  invalid: [\n    // Basic case: accessing e.currentTarget inside setState callback\n    {\n      code: '<input onChange={(e) => setChecks((c) => ({ ...c, value: e.currentTarget.checked }))} />',\n      errors: [{ messageId: 'noCurrentTargetInCallback' }],\n    },\n    // Multiple accesses\n    {\n      code: `<input onChange={(e) => setChecks((c) => ({\n        ...c,\n        value: e.currentTarget.checked,\n        name: e.currentTarget.name\n      }))} />`,\n      errors: [\n        { messageId: 'noCurrentTargetInCallback' },\n        { messageId: 'noCurrentTargetInCallback' },\n      ],\n    },\n    // Different event parameter names\n    {\n      code: '<input onChange={(event) => setChecks((c) => ({ ...c, value: event.currentTarget.checked }))} />',\n      errors: [{ messageId: 'noCurrentTargetInCallback' }],\n    },\n    {\n      code: '<input onChange={(evt) => setChecks((c) => ({ ...c, value: evt.currentTarget.checked }))} />',\n      errors: [{ messageId: 'noCurrentTargetInCallback' }],\n    },\n    // onClick handler\n    {\n      code: '<button onClick={(e) => setFoo((prev) => ({ ...prev, clicked: e.currentTarget.id }))} />',\n      errors: [{ messageId: 'noCurrentTargetInCallback' }],\n    },\n    // Nested arrow function in array method\n    {\n      code: '<input onChange={(e) => items.map(() => e.currentTarget.value)} />',\n      errors: [{ messageId: 'noCurrentTargetInCallback' }],\n    },\n    // Function expression callback\n    {\n      code: '<input onChange={(e) => setChecks(function(c) { return { ...c, value: e.currentTarget.checked }; })} />',\n      errors: [{ messageId: 'noCurrentTargetInCallback' }],\n    },\n    // Deeply nested\n    {\n      code: '<input onChange={(e) => outer(() => inner(() => e.currentTarget.value))} />',\n      errors: [{ messageId: 'noCurrentTargetInCallback' }],\n    },\n    // With block body\n    {\n      code: `<input onChange={(e) => {\n        setChecks((c) => {\n          return { ...c, value: e.currentTarget.checked };\n        });\n      }} />`,\n      errors: [{ messageId: 'noCurrentTargetInCallback' }],\n    },\n  ],\n});\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prairielearn/eslint-plugin",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PrairieLearn/PrairieLearn.git",
@@ -24,7 +24,7 @@
     "@types/node": "^24.10.9",
     "@typescript-eslint/rule-tester": "^8.54.0",
     "@typescript-eslint/types": "^8.54.0",
-    "@typescript/native-preview": "^7.0.0-dev.20260130.1",
+    "@typescript/native-preview": "^7.0.0-dev.20260203.1",
     "@vitest/coverage-v8": "^4.0.18",
     "tsx": "^4.21.0",
     "vitest": "^4.0.18"

package/src/index.ts

@@ -1,6 +1,7 @@
 import awsClientMandatoryConfig from './rules/aws-client-mandatory-config.js';
 import awsClientSharedConfig from './rules/aws-client-shared-config.js';
 import jsxNoDollarInterpolation from './rules/jsx-no-dollar-interpolation.js';
+import noCurrentTargetInCallback from './rules/no-current-target-in-callback.js';
 import noUnusedSqlBlocks from './rules/no-unused-sql-blocks.js';
 import safeDbTypes from './rules/safe-db-types.js';
 
@@ -8,6 +9,7 @@ export const rules = {
   'aws-client-mandatory-config': awsClientMandatoryConfig,
   'aws-client-shared-config': awsClientSharedConfig,
   'jsx-no-dollar-interpolation': jsxNoDollarInterpolation,
+  'no-current-target-in-callback': noCurrentTargetInCallback,
   'no-unused-sql-blocks': noUnusedSqlBlocks,
   'safe-db-types': safeDbTypes,
 };

package/src/rules/no-current-target-in-callback.ts

@@ -0,0 +1,177 @@
+import { ESLintUtils, type TSESTree } from '@typescript-eslint/utils';
+
+/**
+ * This rule detects when `event.currentTarget` is accessed inside a nested
+ * callback function within a React event handler. This is problematic because
+ * React may execute callbacks (like those passed to setState) asynchronously,
+ * at which point `currentTarget` may already be nullified.
+ *
+ * Bad:
+ * ```tsx
+ * onChange={(e) => setChecks((c) => ({ ...c, value: e.currentTarget.checked }))}
+ * ```
+ *
+ * Good:
+ * ```tsx
+ * onChange={({ currentTarget }) => setChecks((c) => ({ ...c, value: currentTarget.checked }))}
+ * ```
+ */
+export default ESLintUtils.RuleCreator.withoutDocs({
+  meta: {
+    type: 'problem',
+    messages: {
+      noCurrentTargetInCallback:
+        'Accessing event.currentTarget inside a callback may fail because currentTarget can be nullified before the callback runs. Destructure currentTarget at the start of the event handler instead.',
+    },
+    schema: [],
+  },
+  defaultOptions: [],
+
+  create(context) {
+    // Track event handler parameters and their scopes
+    const eventHandlerParams = new Map<TSESTree.Node, TSESTree.Identifier>();
+
+    /** Check if a node is inside a nested function relative to the event handler */
+    function isInsideNestedFunction(
+      node: TSESTree.Node,
+      eventHandlerFunction: TSESTree.Node,
+    ): boolean {
+      let current: TSESTree.Node | undefined = node.parent;
+      let foundNestedFunction = false;
+
+      while (current && current !== eventHandlerFunction) {
+        if (
+          current.type === 'ArrowFunctionExpression' ||
+          current.type === 'FunctionExpression' ||
+          current.type === 'FunctionDeclaration'
+        ) {
+          foundNestedFunction = true;
+        }
+        current = current.parent;
+      }
+
+      return foundNestedFunction && current === eventHandlerFunction;
+    }
+
+    /** Find the function that contains this node */
+    function findContainingFunction(
+      node: TSESTree.Node,
+    ): TSESTree.ArrowFunctionExpression | TSESTree.FunctionExpression | null {
+      let current: TSESTree.Node | undefined = node.parent;
+
+      while (current) {
+        if (current.type === 'ArrowFunctionExpression' || current.type === 'FunctionExpression') {
+          return current;
+        }
+        current = current.parent;
+      }
+
+      return null;
+    }
+
+    /** Check if a function is a JSX event handler */
+    function isJSXEventHandler(
+      func: TSESTree.ArrowFunctionExpression | TSESTree.FunctionExpression,
+    ): boolean {
+      const parent = func.parent;
+
+      // Check for JSX attribute like onChange={...}
+      if (parent?.type === 'JSXExpressionContainer') {
+        const jsxAttribute = parent.parent;
+        if (jsxAttribute?.type === 'JSXAttribute') {
+          const attrName = jsxAttribute.name.type === 'JSXIdentifier' ? jsxAttribute.name.name : '';
+          // Match common event handler patterns
+          return /^on[A-Z]/.test(attrName);
+        }
+      }
+
+      return false;
+    }
+
+    /** Get the first parameter of an event handler if it looks like an event */
+    function getEventParameter(
+      func: TSESTree.ArrowFunctionExpression | TSESTree.FunctionExpression,
+    ): TSESTree.Identifier | null {
+      const firstParam = func.params[0];
+
+      if (!firstParam) return null;
+
+      // Simple identifier parameter like (e) => ...
+      if (firstParam.type === 'Identifier') {
+        return firstParam;
+      }
+
+      return null;
+    }
+
+    return {
+      // When we enter a JSX event handler, track its event parameter
+      'JSXAttribute > JSXExpressionContainer > ArrowFunctionExpression': (
+        node: TSESTree.ArrowFunctionExpression,
+      ) => {
+        if (isJSXEventHandler(node)) {
+          const eventParam = getEventParameter(node);
+          if (eventParam) {
+            eventHandlerParams.set(node, eventParam);
+          }
+        }
+      },
+      'JSXAttribute > JSXExpressionContainer > FunctionExpression': (
+        node: TSESTree.FunctionExpression,
+      ) => {
+        if (isJSXEventHandler(node)) {
+          const eventParam = getEventParameter(node);
+          if (eventParam) {
+            eventHandlerParams.set(node, eventParam);
+          }
+        }
+      },
+
+      // Check for .currentTarget access
+      MemberExpression(node) {
+        // Only check for .currentTarget property access
+        if (node.property.type !== 'Identifier' || node.property.name !== 'currentTarget') {
+          return;
+        }
+
+        // Check if the object is an identifier (like `e` in `e.currentTarget`)
+        if (node.object.type !== 'Identifier') {
+          return;
+        }
+
+        const objectName = node.object.name;
+
+        // Find the containing function
+        const containingFunction = findContainingFunction(node);
+        if (!containingFunction) return;
+
+        // Check each tracked event handler to see if this access is problematic
+        for (const [eventHandler, eventParam] of eventHandlerParams) {
+          // Check if this is accessing the event parameter
+          if (objectName !== eventParam.name) continue;
+
+          // Check if the access is inside a nested function within the event handler
+          if (isInsideNestedFunction(node, eventHandler)) {
+            context.report({
+              node,
+              messageId: 'noCurrentTargetInCallback',
+            });
+            return;
+          }
+        }
+      },
+
+      // Clean up when leaving event handlers
+      'JSXAttribute > JSXExpressionContainer > ArrowFunctionExpression:exit': (
+        node: TSESTree.ArrowFunctionExpression,
+      ) => {
+        eventHandlerParams.delete(node);
+      },
+      'JSXAttribute > JSXExpressionContainer > FunctionExpression:exit': (
+        node: TSESTree.FunctionExpression,
+      ) => {
+        eventHandlerParams.delete(node);
+      },
+    };
+  },
+});

package/src/tests/no-current-target-in-callback.test.ts

@@ -0,0 +1,107 @@
+import { RuleTester } from '@typescript-eslint/rule-tester';
+import { afterAll, describe, it } from 'vitest';
+
+import rule from '../rules/no-current-target-in-callback.js';
+
+RuleTester.afterAll = afterAll;
+RuleTester.describe = describe;
+RuleTester.it = it;
+
+const ruleTester = new RuleTester({
+  languageOptions: {
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
+      },
+    },
+  },
+});
+
+ruleTester.run('no-current-target-in-callback', rule, {
+  valid: [
+    // Direct access to currentTarget (no nesting) is fine
+    {
+      code: '<input onChange={(e) => console.log(e.currentTarget.value)} />',
+    },
+    // Destructuring at the handler level is the recommended pattern
+    {
+      code: '<input onChange={({ currentTarget }) => setChecks((c) => ({ ...c, value: currentTarget.checked }))} />',
+    },
+    // Using a local variable is fine
+    {
+      code: `<input onChange={(e) => {
+        const target = e.currentTarget;
+        setChecks((c) => ({ ...c, value: target.checked }));
+      }} />`,
+    },
+    // Non-event handlers are not checked
+    {
+      code: '<Component render={(e) => setFoo(() => e.currentTarget)} />',
+    },
+    // Direct setState without callback
+    {
+      code: '<input onChange={(e) => setChecks({ value: e.currentTarget.checked })} />',
+    },
+    // Event target (not currentTarget) - different issue, not covered by this rule
+    {
+      code: '<input onChange={(e) => setChecks((c) => ({ ...c, value: e.target.checked }))} />',
+    },
+  ],
+  invalid: [
+    // Basic case: accessing e.currentTarget inside setState callback
+    {
+      code: '<input onChange={(e) => setChecks((c) => ({ ...c, value: e.currentTarget.checked }))} />',
+      errors: [{ messageId: 'noCurrentTargetInCallback' }],
+    },
+    // Multiple accesses
+    {
+      code: `<input onChange={(e) => setChecks((c) => ({
+        ...c,
+        value: e.currentTarget.checked,
+        name: e.currentTarget.name
+      }))} />`,
+      errors: [
+        { messageId: 'noCurrentTargetInCallback' },
+        { messageId: 'noCurrentTargetInCallback' },
+      ],
+    },
+    // Different event parameter names
+    {
+      code: '<input onChange={(event) => setChecks((c) => ({ ...c, value: event.currentTarget.checked }))} />',
+      errors: [{ messageId: 'noCurrentTargetInCallback' }],
+    },
+    {
+      code: '<input onChange={(evt) => setChecks((c) => ({ ...c, value: evt.currentTarget.checked }))} />',
+      errors: [{ messageId: 'noCurrentTargetInCallback' }],
+    },
+    // onClick handler
+    {
+      code: '<button onClick={(e) => setFoo((prev) => ({ ...prev, clicked: e.currentTarget.id }))} />',
+      errors: [{ messageId: 'noCurrentTargetInCallback' }],
+    },
+    // Nested arrow function in array method
+    {
+      code: '<input onChange={(e) => items.map(() => e.currentTarget.value)} />',
+      errors: [{ messageId: 'noCurrentTargetInCallback' }],
+    },
+    // Function expression callback
+    {
+      code: '<input onChange={(e) => setChecks(function(c) { return { ...c, value: e.currentTarget.checked }; })} />',
+      errors: [{ messageId: 'noCurrentTargetInCallback' }],
+    },
+    // Deeply nested
+    {
+      code: '<input onChange={(e) => outer(() => inner(() => e.currentTarget.value))} />',
+      errors: [{ messageId: 'noCurrentTargetInCallback' }],
+    },
+    // With block body
+    {
+      code: `<input onChange={(e) => {
+        setChecks((c) => {
+          return { ...c, value: e.currentTarget.checked };
+        });
+      }} />`,
+      errors: [{ messageId: 'noCurrentTargetInCallback' }],
+    },
+  ],
+});