Linter ignores invalid hook usage inside fat-arrow-functions.

[annitya]

Edit: Updated playground.

Environment information

Is this available through the playground-environment?

Rule name

useHookAtTopLevel

Playground link

https://biomejs.dev/playground/?code=YwBvAG4AcwB0ACAAYwBsAGUAYQByAGwAeQBOAG8AdABBAEgAbwBvAGsATwByAEMAbwBtAHAAbwBuAGUAbgB0ACAAPQAgACgAKQAgAD0APgAgAHsACgAgACAAdQBzAGUARQBmAGYAZQBjAHQAKAAoACkAIAA9AD4AIAB7AAoAIAAgACAAIAAKACAAIAB9ACwAIABbAF0AKQA7AAoACgAgACAAcgBlAHQAdQByAG4AIAB7ACAAcwBvAG0AZQA6ACAAJwBvAGIAagAnACAAfQA7AAoAfQAKAAoAYwBvAG4AcwB0ACAAQQBwAHAAIAA9ACAAKAApACAAPQA%2BACAAewAKACAAIABjAGwAZQBhAHIAbAB5AE4AbwB0AEEASABvAG8AawBPAHIAQwBvAG0AcABvAG4AZQBuAHQAKAApADsACgAgACAACgAgACAAcgBlAHQAdQByAG4AIAAoAAoAIAAgACAAIAA8AGQAaQB2AD4ACgAgACAAIAAgACAAIAA8AHAAPgBqAHMAeAAgAGEAbgBkACAAcwB1AGMAaAA8AC8AcAA%2BAAoAIAAgACAAIAA8AC8AZABpAHYAPgAKACAAIAApADsACgB9AA%3D%3D&ruleDomains.react=recommended

Expected result

useEffect inside usedInsideRenderScope-function should be caught by the linter.

Code of Conduct

• I agree to follow Biome's Code of Conduct

[mdevils]

Hello @annitya. It seems to me there's some misunderstanding about the behavior of this rule or I didn't understand your report properly.

There are two factors that influence different approach at useHookAtTopLevel to the functions you defined.

1. Whether or not function name starts with use. Functions that starts with use are considered hooks.
2. Whether or not your function is called from a component or hook.

I'm not sure what's the actual issue/problem you're reporting here. Please clarify.

[annitya]

While looking for similar issues I came across this PR.
I got this part:

Hook usage in any non-component/hook function now produces a lint.

But overlooked an important detail:

The exception to this is if the hook is called from within an anonymous function (JsArrowFunctionExpression or JsFunctionExpression).

With that in mind, let me attempt to improve my report:

const clearlyNotAHookOrComponent = () => {
  useEffect(() => {
    
  }, []);

  return { some: 'obj' };
}

const App = () => {
  clearlyNotAHookOrComponent();
  
  return (
    <div>
      <p>jsx and such</p>
    </div>
  );
}

I had expected a complaint since: the name clearlyNotAHookOrComponent does not start with "use" and calls a hook internally.

[mdevils]

Oh, OK, I think I see the difference now.

Do I understand properly that your report is about the fact that these two functions end up being treated differently?

function clearlyNotAHookOrComponent1() {
  useEffect();
};

const clearlyNotAHookOrComponent2 = () => {
  useEffect();
};

[annitya]

The important part is in my previous comment. There is a clear violation of the rules-of-hooks, but no notice from the linter. I suggest approaching it from a viewpoint of consequence and not from the implementation details.

Now, regarding the implementation-details... :)

I found the explanation for the difference between named/arrow-functions here. A comprise was reached to avoid false positives for tests without requiring configuration.

I suspect the compromise was a bit too lenient.
They wanted:

test('should do something', () => {
  const { result } = renderHook(() => useCustomHook());
}

to pass inspection, but ended up allowing:

const clearlyNotAHookOrComponent = () => {
  useEffect(() => {
    
  }, []);

  return { some: 'obj' };
}

as well.

Perhaps adding a further restriction on "JsArrowFunctionExpression not assigned not variable", could allow the comprise to live on without the adverse aforementioned effects?