fix(plugins/hooks-extra): misidentification of 'set' function in IIFE inside of hooks as its inside of 'useEffect', 'useLayoutEffect', closes #967 (#968)

Author: Rel1cx

packages/plugins/eslint-plugin-react-hooks-extra/src/hooks/use-no-direct-set-state-in-use-effect.ts

@@ -107,8 +107,9 @@ export function useNoDirectSetStateInUseEffect<Ctx extends RuleContext>(
       match(getCallKind(node))
         .with("setState", () => {
           switch (true) {
-            case pEntry.node === setupFunction
-              || pEntry.kind === "immediate": {
+            case pEntry.node === setupFunction:
+            case pEntry.kind === "immediate"
+              && AST.findParentNode(pEntry.node, AST.isFunction) === setupFunction: {
               onViolation(context, node, {
                 name: context.sourceCode.getText(node.callee),
               });

packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-direct-set-state-in-use-effect.spec.ts

@@ -785,5 +785,21 @@ ruleTester.run(RULE_NAME, rule, {
         // ...use tooltipHeight in the rendering logic below...
       }
     `,
+    // https://github.com/Rel1cx/eslint-react/issues/967
+    /* tsx */ `
+      import { useEffect, useState, useCallback } from "react";
+
+      function useCustomHook() {
+        const [something, setSomething] = useState('');
+
+        const test = useCallback(() => {
+          setSomething('') // doesn't trigger the rules
+
+          ;(() => {
+            setSomething('') // trigger the rules
+          })()
+        }, [])
+      }
+    `,
   ],
 });

packages/plugins/eslint-plugin-react-x/src/rules/no-children-prop.md

@@ -20,7 +20,7 @@ react-x/no-children-prop
 
 ## What it does
 
-Disallows passing 'children' as a prop.
+Disallows passing `children` as a prop.
 
 Most of the time, `children` should be actual `children`, not passed in as a `prop`.