Bug: eslint-plugin-react-hooks doesn't work inside export default () => { ... }

[alexgorbatchev]

React version: 18

Steps To Reproduce

https://codesandbox.io/s/blissful-margulis-gljgjm?file=/src/App.js

import { useEffect } from 'react';

export default () => {
  const isVal = 0;

  if (isVal) {
    // NO HOOK WARNING
    useEffect(() => {
      //
    });
  }

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
    </div>
  );
}

import { useEffect } from 'react';

export default function App() {
  const isVal = 0;

  if (isVal) {
    // SHOWS HOOK WARNING
    useEffect(() => {
      //
    });
  }

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
    </div>
  );
}

The current behavior

Conditional hook usage isn't detected inside export default () => { ... }

The expected behavior

Conditional hook usage should be detected inside export default () => { ... }

[mr07s]

Hi @alexgorbatchev I don't know why but it seems like when you add a name to your function only then it's detect the conditional hook usage
.

[Atharvcreatives]

Hey there! I can address and Fix this issue. Please consider assigning this issue to me.

[rickhanlonii]

Dupe of #14404

[YiiChitty]

@rickhanlonii
Hi, we are facing the same issue as described.
Besides the test cases mentioned in #28147 , our project uses MobX for state management, and a common pattern we use is observer(() => {}).
In this cases, the problem is also not detected.

It seems that this issue has not been fixed yet, correct?

To temporarily resolve this issue, we are modifying ./cjs/eslint-plugin-react-hooks.development.js through patch-package to ensure our project's ESLint can correctly check the code.

My question is:
When is ./cjs/eslint-plugin-react-hooks.production.min.js typically used?
Do I need to synchronize these changes to ./cjs/eslint-plugin-react-hooks.production.min.js as well?

[YiiChitty]

To temporarily resolve this issue, we are modifying ./cjs/eslint-plugin-react-hooks.development.js through patch-package to ensure our project's ESLint can correctly check the code.

btw.....
Here are our solutions:

1. For observer case:
   Simply，We just add isObserverCallback and use like isMemoCallback and isForwardRefCallback

function isObserverCallback(node) {
   return !!(node.parent && node.parent.callee && isReactFunction(node.parent.callee, 'observer'));
}

2. And For export default case:
   We add isInDefaultDeclaration and handle with the same handled function like isDirectlyInsideComponentOrHook.

function isInDefaultDeclaration(node) {
  if ((node.type === 'ArrowFunctionExpression' || node.type === 'FunctionDeclaration') && node.parent.type ==='ExportDefaultDeclaration'){
    return true
  }
  return false
}

// in create: function (context) 
var isDefaultDeclaration = isInDefaultDeclaration(codePathNode);
// .... 
if (isDirectlyInsideComponentOrHook || isDefaultDeclaration) 
// ...

I'm not sure if this modification is the correct approach, but it seems to be working well in our projects :D
Any advice or suggestions on this matter would be greatly appreciated ❤