---
source: crates/biome_js_analyze/tests/spec_tests.rs
expression: invalid.js
---
# Input
```jsx
// Hook called directly at the component function
function Component1({ a }) {
    if (a == 1) {
        useEffect();
    }

    if (a == 1) {
        {
            useEffect();
        }
    }

    for (; a < 10;) {
        useEffect();
    }

    for (const x of a) {
        useEffect();
    }

    for (const x in a) {
        useEffect();
    }

    while (a < 10) {
        useEffect();
    }

    do {
        useEffect();
    } while (a < 10)

    a && useEffect();

    a.map(() => useEffect());
}

// Hook called indirectly
function helper1() {
    useEffect();
}

function helper2() {
    helper1();
}

function Component2({ a }) {
    if (a) {
        helper2(1);
    }
}

const Component3 = () => {
    if (a == 1) {
        useEffect();
    }
};

export function Component4() {
    if (a == 1) {
        useEffect();
    }
};

export default function Component5() {
    if (a == 1) {
        useEffect();
    }
};

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

const Component7 = () => {
    if (a == 1) {
        Component6();
    }
};

const Component8 = () => {
    if (a == 1) {
        useRef().value;
    }

    const [_val, _setter] = useState(a ? useMemo('hello') : null);
};

const Component9 = () => {
    a ? useEffect() : null;
    a ?? useEffect();
};

function Component10() {
    return;

    useEffect();
}

function Component11() {
    if (!a) {
        return;
    }

    useEffect();
}

function Component12() {
    if (!a) {
        return;
    }

    {
        useEffect();
    }
}

function Component13() {
    useEffect();
};

function Component14() {
    if (!a) {
        return;
    }

    Component13();
}

function useHookInsideTryClause() {
    try {
        useState();
    } catch { }
}

function useHookInsideCatchClause() {
    try {
    } catch (error) {
        useErrorHandler(error);
    }
}

function useHookInsideObjectBindingInitializer(props) {
    const { value = useDefaultValue() } = props;
}

function useHookInsideObjectBindingInitializerInArgument({ value = useDefaultValue() }) {
}

function useHookInsideArrayAssignmentInitializer(props) {
    let item;
    [item = useDefaultItem()] = props.array;
}

function useHookInsideArrayBindingInitializer(props) {
    const [item = useDefaultItem()] = props.array;
}

test('b', () => {
    const TestComponent = () => {
        useState();
        const handler = () => {
            useHook();
        };
    };

    render(<TestComponent />);
});

```

# Diagnostics
```
invalid.js:4:9 lint/correctness/useHookAtTopLevel ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.
  
    2 │ function Component1({ a }) {
    3 │     if (a == 1) {
  > 4 │         useEffect();
      │         ^^^^^^^^^
    5 │     }
    6 │ 
  
  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
  

```

```
invalid.js:9:13 lint/correctness/useHookAtTopLevel ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.
  
     7 │     if (a == 1) {
     8 │         {
   > 9 │             useEffect();
       │             ^^^^^^^^^
    10 │         }
    11 │     }
  
  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
  

```

```
invalid.js:14:9 lint/correctness/useHookAtTopLevel ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.
  
    13 │     for (; a < 10;) {
  > 14 │         useEffect();
       │         ^^^^^^^^^
    15 │     }
    16 │ 
  
  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
  

```

```
invalid.js:18:9 lint/correctness/useHookAtTopLevel ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.
  
    17 │     for (const x of a) {
  > 18 │         useEffect();
       │         ^^^^^^^^^
    19 │     }
    20 │ 
  
  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
  

```

```
invalid.js:22:9 lint/correctness/useHookAtTopLevel ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.
  
    21 │     for (const x in a) {
  > 22 │         useEffect();
       │         ^^^^^^^^^
    23 │     }
    24 │ 
  
  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
  

```

```
invalid.js:26:9 lint/correctness/useHookAtTopLevel ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.
  
    25 │     while (a < 10) {
  > 26 │         useEffect();
       │         ^^^^^^^^^
    27 │     }
    28 │ 
  
  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
  

```

```
invalid.js:30:9 lint/correctness/useHookAtTopLevel ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.
  
    29 │     do {
  > 30 │         useEffect();
       │         ^^^^^^^^^
    31 │     } while (a < 10)
    32 │ 
  
  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
  

```

```
invalid.js:33:10 lint/correctness/useHookAtTopLevel ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.
  
    31 │     } while (a < 10)
    32 │ 
  > 33 │     a && useEffect();
       │          ^^^^^^^^^
    34 │ 
    35 │     a.map(() => useEffect());
  
  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
  

```

```
invalid.js:35:17 lint/correctness/useHookAtTopLevel ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! This hook is being called from a nested function, but all hooks must be called unconditionally from the top-level component.
  
    33 │     a && useEffect();
    34 │ 
  > 35 │     a.map(() => useEffect());
       │                 ^^^^^^^^^
    36 │ }
    37 │ 
  
  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
  

```

```
invalid.js:40:5 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.
  
    38 │ // Hook called indirectly
    39 │ function helper1() {
  > 40 │     useEffect();
       │     ^^^^^^^^^
    41 │ }
    42 │ 
  
  i This is the call path until the hook.
  
    41 │ }
    42 │ 
  > 43 │ function helper2() {
       │                     
  > 44 │     helper1();
       │     ^^^^^^^^^
    45 │ }
    46 │ 
  
  i 
  
    47 │ function Component2({ a }) {
  > 48 │     if (a) {
       │             
  > 49 │         helper2(1);
       │         ^^^^^^^^^^
    50 │     }
    51 │ }
  
  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
  

```

```
invalid.js:55:9 lint/correctness/useHookAtTopLevel ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.
  
    53 │ const Component3 = () => {
    54 │     if (a == 1) {
  > 55 │         useEffect();
       │         ^^^^^^^^^
    56 │     }
    57 │ };
  
  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
  

```

```
invalid.js:61:9 lint/correctness/useHookAtTopLevel ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.
  
    59 │ export function Component4() {
    60 │     if (a == 1) {
  > 61 │         useEffect();
       │         ^^^^^^^^^
    62 │     }
    63 │ };
  
  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
  

```

```
invalid.js:67:9 lint/correctness/useHookAtTopLevel ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.
  
    65 │ export default function Component5() {
    66 │     if (a == 1) {
  > 67 │         useEffect();
       │         ^^^^^^^^^
    68 │     }
    69 │ };
  
  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
  

```

```
invalid.js:72:5 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.
  
    71 │ const Component6 = () => {
  > 72 │     useEffect();
       │     ^^^^^^^^^
    73 │ };
    74 │ 
  
  i This is the call path until the hook.
  
    75 │ const Component7 = () => {
  > 76 │     if (a == 1) {
       │                  
  > 77 │         Component6();
       │         ^^^^^^^^^^^^
    78 │     }
    79 │ };
  
  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
  

```

```
invalid.js:83:9 lint/correctness/useHookAtTopLevel ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.
  
    81 │ const Component8 = () => {
    82 │     if (a == 1) {
  > 83 │         useRef().value;
       │         ^^^^^^
    84 │     }
    85 │ 
  
  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
  

```

```
invalid.js:86:42 lint/correctness/useHookAtTopLevel ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.
  
    84 │     }
    85 │ 
  > 86 │     const [_val, _setter] = useState(a ? useMemo('hello') : null);
       │                                          ^^^^^^^
    87 │ };
    88 │ 
  
  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
  

```

```
invalid.js:90:9 lint/correctness/useHookAtTopLevel ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.
  
    89 │ const Component9 = () => {
  > 90 │     a ? useEffect() : null;
       │         ^^^^^^^^^
    91 │     a ?? useEffect();
    92 │ };
  
  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
  

```

```
invalid.js:91:10 lint/correctness/useHookAtTopLevel ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.
  
    89 │ const Component9 = () => {
    90 │     a ? useEffect() : null;
  > 91 │     a ?? useEffect();
       │          ^^^^^^^^^
    92 │ };
    93 │ 
  
  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
  

```

```
invalid.js:97:5 lint/correctness/useHookAtTopLevel ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.
  
    95 │     return;
    96 │ 
  > 97 │     useEffect();
       │     ^^^^^^^^^
    98 │ }
    99 │ 
  
  i Hooks should not be called after an early return.
  
    92 │ };
    93 │ 
  > 94 │ function Component10() {
       │                         
  > 95 │     return;
       │     ^^^^^^^
    96 │ 
    97 │     useEffect();
  
  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
  

```

```
invalid.js:105:5 lint/correctness/useHookAtTopLevel ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.
  
    103 │     }
    104 │ 
  > 105 │     useEffect();
        │     ^^^^^^^^^
    106 │ }
    107 │ 
  
  i Hooks should not be called after an early return.
  
    100 │ function Component11() {
  > 101 │     if (!a) {
        │              
  > 102 │         return;
        │         ^^^^^^^
    103 │     }
    104 │ 
  
  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
  

```

```
invalid.js:114:9 lint/correctness/useHookAtTopLevel ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.
  
    113 │     {
  > 114 │         useEffect();
        │         ^^^^^^^^^
    115 │     }
    116 │ }
  
  i Hooks should not be called after an early return.
  
    108 │ function Component12() {
  > 109 │     if (!a) {
        │              
  > 110 │         return;
        │         ^^^^^^^
    111 │     }
    112 │ 
  
  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
  

```

```
invalid.js:119:5 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.
  
    118 │ function Component13() {
  > 119 │     useEffect();
        │     ^^^^^^^^^
    120 │ };
    121 │ 
  
  i This is the call path until the hook.
  
    123 │     if (!a) {
    124 │         return;
  > 125 │     }
        │      
  > 126 │ 
  > 127 │     Component13();
        │     ^^^^^^^^^^^^^
    128 │ }
    129 │ 
  
  i Hooks should not be called after an early return.
  
    122 │ function Component14() {
  > 123 │     if (!a) {
        │              
  > 124 │         return;
        │         ^^^^^^^
    125 │     }
    126 │ 
  
  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
  

```

```
invalid.js:132:9 lint/correctness/useHookAtTopLevel ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.
  
    130 │ function useHookInsideTryClause() {
    131 │     try {
  > 132 │         useState();
        │         ^^^^^^^^
    133 │     } catch { }
    134 │ }
  
  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
  

```

```
invalid.js:139:9 lint/correctness/useHookAtTopLevel ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.
  
    137 │     try {
    138 │     } catch (error) {
  > 139 │         useErrorHandler(error);
        │         ^^^^^^^^^^^^^^^
    140 │     }
    141 │ }
  
  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
  

```

```
invalid.js:144:21 lint/correctness/useHookAtTopLevel ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.
  
    143 │ function useHookInsideObjectBindingInitializer(props) {
  > 144 │     const { value = useDefaultValue() } = props;
        │                     ^^^^^^^^^^^^^^^
    145 │ }
    146 │ 
  
  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
  

```

```
invalid.js:147:68 lint/correctness/useHookAtTopLevel ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.
  
    145 │ }
    146 │ 
  > 147 │ function useHookInsideObjectBindingInitializerInArgument({ value = useDefaultValue() }) {
        │                                                                    ^^^^^^^^^^^^^^^
    148 │ }
    149 │ 
  
  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
  

```

```
invalid.js:152:13 lint/correctness/useHookAtTopLevel ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.
  
    150 │ function useHookInsideArrayAssignmentInitializer(props) {
    151 │     let item;
  > 152 │     [item = useDefaultItem()] = props.array;
        │             ^^^^^^^^^^^^^^
    153 │ }
    154 │ 
  
  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
  

```

```
invalid.js:156:19 lint/correctness/useHookAtTopLevel ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.
  
    155 │ function useHookInsideArrayBindingInitializer(props) {
  > 156 │     const [item = useDefaultItem()] = props.array;
        │                   ^^^^^^^^^^^^^^
    157 │ }
    158 │ 
  
  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
  

```

```
invalid.js:163:13 lint/correctness/useHookAtTopLevel ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! This hook is being called from a nested function, but all hooks must be called unconditionally from the top-level component.
  
    161 │         useState();
    162 │         const handler = () => {
  > 163 │             useHook();
        │             ^^^^^^^
    164 │         };
    165 │     };
  
  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
  

```