Adds illegal anonymous function error msg

azure-pipelines.yml

@@ -1,5 +1,5 @@
 pool:
-  vmImage: 'Ubuntu-16.04'
+  vmImage: 'ubuntu-18.04'
 
 steps:
   - task: NodeTool@0

src/react-hooks-nesting-walker/error-messages.ts

@@ -17,4 +17,5 @@ export const ERROR_MESSAGES = {
     'A hook cannot be used inside of another function',
   invalidFunctionExpression: 'A hook cannot be used inside of another function',
   hookAfterEarlyReturn: 'A hook should not appear after a return statement',
+  anonymousFunctionIllegalCallback: `Hook is in an anonymous function that is passed to an illegal callback. Legal callbacks identifiers that can receive anonymous functions as arguments are memo and forwardRef`,
 };

src/react-hooks-nesting-walker/react-hooks-nesting-walker.ts

@@ -190,6 +190,17 @@ export class ReactHooksNestingWalker extends RuleWalker {
         return;
       }
 
+      /**
+       * Detect if the unnamed expression is wrapped in a illegal function call
+       */
+      if (isIdentifier((ancestor.parent as CallExpression)?.expression)) {
+        this.addFailureAtNode(
+          hookNode,
+          ERROR_MESSAGES.anonymousFunctionIllegalCallback,
+        );
+        return;
+      }
+
       // Disallow using hooks inside other kinds of functions
       this.addFailureAtNode(hookNode, ERROR_MESSAGES.invalidFunctionExpression);
       return;

test/tslint-rule/anonymous-function-error.ts.lint

@@ -0,0 +1,26 @@
+const IllegalComponent = wrapper(function() {
+  useEffect(() => {});
+  ~~~~~~~~~~~~~~~~~~~ [Hook is in an anonymous function that is passed to an illegal callback. Legal callbacks identifiers that can receive anonymous functions as arguments are memo and forwardRef]
+})
+
+const LegalAnonymousComponent = function() {
+  useEffect(() => {});
+}
+
+const ForwardedComponent = React.forwardRef(function(props, ref) {
+  useEffect(() => {
+    console.log("I am legal")
+  });
+})
+
+const MemoizedComponent = React.memo((props) => {
+  const [state, setState] = React.useState(props.initValue);
+  return <span>{state}</span>
+})
+
+const Functor = function() {
+  const cb = React.useCallback(() => {
+    const r = React.useRef()
+              ~~~~~~~~~~~~~~ [A hook cannot be used inside of another function]
+  }, [])
+}