useHookAtTopLevel

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs> <TabItem label="JSX and TSX" icon="seti:javascript"> ## Summary - Rule available since: `v1.0.0` - Diagnostic Category: [`lint/correctness/useHookAtTopLevel`](/reference/diagnostics#diagnostic-category) - This rule is **recommended**, meaning it is enabled by default. - This rule doesn't have a fix. - The default severity of this rule is [**error**](/reference/diagnostics#error). - This rule belongs to the following domains: - [`react`](/linter/domains#react) - [`next`](/linter/domains#next) - Sources: - Same as [`react-hooks/rules-of-hooks`](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/README.md)

How to configure

json

{
	"linter": {
		"rules": {
			"correctness": {
				"useHookAtTopLevel": "error"
			}
		}
	}
}

Description

Enforce that all React hooks are being called from the Top Level component functions.

This rule should be used only in React projects.

To understand why this required see https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level

Examples

Invalid

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

<pre class="language-text"><code class="language-text">code-block.js:3:9 <a href="https://biomejs.dev/linter/rules/use-hook-at-top-level">lint/correctness/useHookAtTopLevel</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✖ This hook is being called conditionally, but all hooks must be called in the exact same order in every component render. 1 │ function Component1({ a }) { 2 │ if (a == 1) { > 3 │ useEffect(); │ ^^^^^^^^^ 4 │ } 5 │ } ℹ For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order. ℹ See https://react.dev/reference/rules/rules-of-hooks </code></pre>

function Component1({ a }) {
    if (a != 1) {
        return;
    }

    useEffect();
}

<pre class="language-text"><code class="language-text">code-block.js:6:5 <a href="https://biomejs.dev/linter/rules/use-hook-at-top-level">lint/correctness/useHookAtTopLevel</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✖ This hook is being called conditionally, but all hooks must be called in the exact same order in every component render. 4 │ } 5 │ > 6 │ useEffect(); │ ^^^^^^^^^ 7 │ } 8 │ ℹ Hooks should not be called after an early return. 1 │ function Component1({ a }) { > 2 │ if (a != 1) { │ > 3 │ return; │ ^^^^^^^ 4 │ } 5 │ ℹ For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order. ℹ See https://react.dev/reference/rules/rules-of-hooks </code></pre>

function notAHook() {
    useEffect();
}

<pre class="language-text"><code class="language-text">code-block.js:2:5 <a href="https://biomejs.dev/linter/rules/use-hook-at-top-level">lint/correctness/useHookAtTopLevel</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✖ This hook is being called from within a function or method that is not a hook or component. 1 │ function notAHook() { > 2 │ useEffect(); │ ^^^^^^^^^ 3 │ } 4 │ ℹ Move the hook call into the top level of a hook or component in order to use it. ℹ See https://react.dev/reference/rules/rules-of-hooks </code></pre>

Valid

function Component1() {
    useEffect();
}

test("the hook", () => {
    renderHook(() => useHook());
});

</TabItem> </Tabs>

How to configure

Description

Examples

Invalid

Valid

Related links