Add avoidEmptyEffect

Author: NickvanDyke

src/messages.js

@@ -1,4 +1,5 @@
 export const messageIds = {
+  avoidEmptyEffect: "avoidEmptyEffect",
   avoidDerivedState: "avoidDerivedState",
   avoidInitializingState: "avoidInitializingState",
   avoidChainingState: "avoidChainingState",
@@ -15,6 +16,8 @@ export const messageIds = {
 
 // TODO: Could include more info in messages, like the relevant node
 export const messages = {
+  [messageIds.avoidEmptyEffect]:
+    'This effect is empty and could be removed.',
   [messageIds.avoidDerivedState]:
     'Avoid storing derived state. Compute "{{state}}" directly during render, optionally with `useMemo` if it\'s expensive.',
   [messageIds.avoidInitializingState]:

src/rule.js

@@ -38,11 +38,18 @@ export const rule = {
       const effectFnRefs = getEffectFnRefs(context, node);
       const depsRefs = getDependenciesRefs(context, node);
 
-      if (!effectFnRefs || effectFnRefs.length === 0 || !depsRefs) {
+      if (!effectFnRefs || !depsRefs) {
+        return;
+      } else if (effectFnRefs.length === 0) {
+        // Hopefully it's obvious the effect can be removed.
+        // More a follow-up for once they fix/remove other issues.
+        context.report({
+          node,
+          messageId: messageIds.avoidEmptyEffect,
+        });
         return;
       }
 
-
       const propUsedToResetAllState = findPropUsedToResetAllState(
         context,
         effectFnRefs,

test/empty-effect.test.js

@@ -0,0 +1,32 @@
+import { MyRuleTester, js } from "./rule-tester.js";
+import { messageIds } from "../src/messages.js";
+
+new MyRuleTester().run("/empty-effect", {
+  valid: [
+    {
+      name: "Valid effect",
+      code: js`
+        function Component() {
+          useEffect(() => {
+            console.log("Meow");
+          }, []);
+        }
+      `,
+    }
+  ],
+  invalid: [
+    {
+      name: "Empty effect",
+      code: js`
+        function Component() {
+          useEffect(() => {}, []);
+        }
+      `,
+      errors: [
+        {
+          messageId: messageIds.avoidEmptyEffect,
+        },
+      ],
+    },
+  ],
+});

test/syntax.test.js

@@ -27,14 +27,6 @@ const code = ({
 // Could be overkill; they shouldn't affect each other (supposedly, but I guess that's the point of tests!)
 new MyRuleTester().run("/syntax", {
   valid: [
-    {
-      name: "Empty effect",
-      code: js`
-        function Component() {
-          useEffect(() => {}, []);
-        }
-      `,
-    },
     {
       name: "Two components with overlapping names",
       // Not a super realistic example