Detect props in custom hooks

Author: NickvanDyke

src/util/react.js

@@ -28,6 +28,16 @@ export const isReactFunctionalHOC = (node) =>
   node.id.type === "Identifier" &&
   node.id.name[0].toUpperCase() === node.id.name[0];
 
+export const isCustomHook = (node) =>
+  (node.type === "FunctionDeclaration" ||
+    (node.type === "VariableDeclarator" &&
+      node.init &&
+      (node.init.type === "ArrowFunctionExpression" ||
+        node.init.type === "FunctionExpression"))) &&
+  node.id.type === "Identifier" &&
+  node.id.name.startsWith("use") &&
+  node.id.name[3] === node.id.name[3].toUpperCase();
+
 export const isUseState = (node) =>
   node.type === "VariableDeclarator" &&
   node.init &&
@@ -114,29 +124,22 @@ export const isProp = (variable) =>
   variable.defs.some(
     (def) =>
       def.type === "Parameter" &&
-      isReactFunctionalComponent(
-        // TODO: Simplify
-        def.node.type === "ArrowFunctionExpression"
-          ? def.node.parent.type === "CallExpression"
-            ? def.node.parent.parent
-            : def.node.parent
-          : def.node,
-      ),
+      (isReactFunctionalComponent(getDeclNode(def.node)) ||
+        isCustomHook(getDeclNode(def.node))),
   );
 export const isHOCProp = (variable) =>
   variable.defs.some(
     (def) =>
-      def.type === "Parameter" &&
-      isReactFunctionalHOC(
-        // TODO: Simplify
-        def.node.type === "ArrowFunctionExpression"
-          ? def.node.parent.type === "CallExpression"
-            ? def.node.parent.parent
-            : def.node.parent
-          : def.node,
-      ),
+      def.type === "Parameter" && isReactFunctionalHOC(getDeclNode(def.node)),
   );
 
+const getDeclNode = (node) =>
+  node.type === "ArrowFunctionExpression"
+    ? node.parent.type === "CallExpression"
+      ? node.parent.parent
+      : node.parent
+    : node;
+
 export const getUseStateNode = (context, ref) => {
   return getUpstreamReactVariables(context, ref.identifier)
     .find((variable) => isState(variable))

test/syntax.test.js

@@ -430,10 +430,9 @@ new MyRuleTester().run("/syntax", {
       ],
     },
     {
-      name: "Custom hook with props",
-      todo: true, // TODO: `isProp` checks that the def is inside a React component, so ignores custom hooks
+      name: "FunctionDeclaration custom hook with props",
       code: js`
-        function useCustomHook({ prop }) {
+        function useCustomHook(prop) {
           const [state, setState] = useState(0);
 
           useEffect(() => {
@@ -442,9 +441,28 @@ new MyRuleTester().run("/syntax", {
 
           return state;
         }
+      `,
+      errors: [
+        {
+          messageId: messageIds.avoidInternalEffect,
+        },
+        {
+          messageId: messageIds.avoidDerivedState,
+          data: { state: "state" },
+        },
+      ],
+    },
+    {
+      name: "VariableDeclarator custom hook with object props",
+      code: js`
+        const useCustomHook = ({ prop }) => {
+          const [state, setState] = useState(0);
 
-        function Component() {
-          const customState = useCustomHook({ prop: 42 });
+          useEffect(() => {
+            setState(prop);
+          }, [prop]);
+
+          return state;
         }
       `,
       errors: [