Simplify IIFE handling. Handle internal callback inside IIFE.

Enahnces
#16

Author: NickvanDyke

src/rule.js

@@ -73,11 +73,7 @@ export const rule = {
               // Don't analyze HOC prop callbacks -- we don't have control over them to lift state or logic
               !isHOCProp(ref.resolved)),
         )
-        .filter(
-          (ref) =>
-            isDirectCall(ref.identifier) ||
-            isDirectCall(findIIFE(ref.identifier)),
-        )
+        .filter((ref) => isDirectCall(ref.identifier))
         .forEach((ref) => {
           const callExpr = getCallExpr(ref);
 

src/util/ast.js

@@ -95,16 +95,7 @@ export const getCallExpr = (ref, current = ref.identifier.parent) => {
   return undefined;
 };
 
-export const findIIFE = (node) => {
-  if (!node) {
-    return undefined;
-  } else if (
-    node.type === "CallExpression" &&
-    (node.callee.type === "ArrowFunctionExpression" ||
-      node.callee.type === "FunctionExpression")
-  ) {
-    return node;
-  } else {
-    return findIIFE(node.parent);
-  }
-};
+export const isIIFE = (node) =>
+  node.type === "CallExpression" &&
+  (node.callee.type === "ArrowFunctionExpression" ||
+    node.callee.type === "FunctionExpression");

src/util/react.js

@@ -3,6 +3,7 @@ import {
   getUpstreamVariables,
   getDownstreamRefs,
   getCallExpr,
+  isIIFE,
 } from "./ast.js";
 
 export const isReactFunctionalComponent = (node) =>
@@ -151,15 +152,14 @@ export const getUseStateNode = (context, ref) => {
 // When false, it's likely inside a callback, e.g. a listener, or Promise chain that retrieves external data.
 // Note we'll still analyze derived setters because isStateSetter considers that.
 // Heuristic inspired by https://eslint-react.xyz/docs/rules/hooks-extra-no-direct-set-state-in-use-effect
-// TODO: Also returns false for IIFEs, which could cause a false negative.
-// But IIFEs in effects are typically used to call async functions, implying it retrieves external state.
-// So, not a big deal.
 export const isDirectCall = (node) => {
   if (!node) {
     return false;
   } else if (
-    node.type === "ArrowFunctionExpression" ||
-    node.type === "FunctionExpression"
+    (node.type === "ArrowFunctionExpression" ||
+      node.type === "FunctionExpression") &&
+    // Keep walking up IIFEs -- we consider them direct calls because they're invoked immediately, as opposed to being a callback
+    !isIIFE(node.parent)
   ) {
     return isUseEffect(node.parent);
   } else {

test/syntax.test.js

@@ -171,6 +171,24 @@ new MyRuleTester().run("/syntax", {
         };
       `,
     },
+    {
+      name: "Internal callback inside IIFE",
+      code: js`
+        import { useEffect, useState } from 'react';
+
+        export const MyComponent = () => {
+          const [state, setState] = useState();
+
+          useEffect(() => {
+            (async () => {
+              window.addEventListener('load', () => {
+                setState('Loaded');
+              });
+            })();
+          }, []);
+        };
+      `,
+    },
   ],
   invalid: [
     {