---
source: crates/biome_js_analyze/tests/spec_tests.rs
expression: customHook.js
---
# Input
```jsx
function MyComponent() {
    // This is valid
    const { a } = useCustomHook();

    // This is invalid
    if (a) {
        const { a } = useCustomHook();
    }
}
```

# Diagnostics
```
customHook.js:7:23 lint/correctness/useHookAtTopLevel ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.
  
    5 │     // This is invalid
    6 │     if (a) {
  > 7 │         const { a } = useCustomHook();
      │                       ^^^^^^^^^^^^^
    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
  

```