fix(no-manage-parent): don't flag when non-prop in deps

#21

Author: NickvanDyke

src/no-event-handler.js

@@ -30,6 +30,8 @@ export const rule = {
       const depsRefs = getDependenciesRefs(context, node);
       if (!effectFnRefs || !depsRefs) return;
 
+      // TODO: Can we also flag this when the deps are internal, and the body calls internal stuff?
+
       findDownstreamNodes(context, node, "IfStatement")
         .filter((ifNode) => !ifNode.alternate)
         .filter((ifNode) =>

src/no-manage-parent.js

@@ -1,4 +1,8 @@
-import { isUseEffect, getEffectFnRefs } from "./util/react.js";
+import {
+  isUseEffect,
+  getEffectFnRefs,
+  getDependenciesRefs,
+} from "./util/react.js";
 import { isProp, isHOCProp } from "./util/react.js";
 
 export const name = "no-manage-parent";
@@ -20,13 +24,16 @@ export const rule = {
   create: (context) => ({
     CallExpression: (node) => {
       if (!isUseEffect(node)) return;
-      const effectFnRefs = getEffectFnRefs(context, node) || [];
+      const effectFnRefs = getEffectFnRefs(context, node);
+      const depsRefs = getDependenciesRefs(context, node);
+      if (!effectFnRefs || !depsRefs) return;
+
       if (effectFnRefs.length === 0) return;
 
       if (
-        effectFnRefs.every(
-          (ref) => isProp(ref.resolved) && !isHOCProp(ref.resolved),
-        )
+        effectFnRefs
+          .concat(depsRefs)
+          .every((ref) => isProp(ref.resolved) && !isHOCProp(ref.resolved))
       ) {
         context.report({
           node,

test/no-manage-parent.test.js

@@ -50,6 +50,20 @@ new MyRuleTester().run(name, rule, {
         }
       `,
     },
+    {
+      // TODO: I'm pretty sure this is an anti-pattern, but I'm not totally sure how...
+      // Should be `no-event-handler`? Because we can call `foo` wherever we call `setBar`.
+      // `foo` is internal, so this isn't syncing to an external system.
+      name: "Effect uses prop but deps has state",
+      code: js`
+        function Component({ foo }) {
+          const [bar, setBar] = useState(0);
+          useEffect(() => {
+            foo;
+          }, [bar]);
+        }
+      `,
+    },
   ],
   invalid: [
     {