---
source: crates/biome_js_analyze/tests/spec_tests.rs
expression: invalid.ts
---
# Input
```ts
const Component1 = () => {
  useEffect() as [];
};

const Component2 = () => {
  if (a == 1) {
      Component1();
  }
};

```

# Diagnostics
```
invalid.ts:2:3 lint/correctness/useHookAtTopLevel ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! This hook is being called indirectly and conditionally, but all hooks must be called in the exact same order in every component render.
  
    1 │ const Component1 = () => {
  > 2 │   useEffect() as [];
      │   ^^^^^^^^^
    3 │ };
    4 │ 
  
  i This is the call path until the hook.
  
    5 │ const Component2 = () => {
  > 6 │   if (a == 1) {
      │                
  > 7 │       Component1();
      │       ^^^^^^^^^^^^
    8 │   }
    9 │ };
  
  i For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
  
  i See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
  

```