use-hook-at-top-level

Requires hooks to run at the top level of components and custom hooks.

Rule details Problem

The rule looks for hook-like calls, names that start with use followed by a capital letter, inside component or custom hook bodies.

It reports hooks called inside conditionals, loops, nested functions, try blocks, after an early return, and recursive hook calls. Hooks inside finally blocks are allowed because that block always runs.

You can narrow or widen what gets checked with onlyHooks, ignoreHooks, and importSources. If onlyHooks is present, it takes priority over the other two options.

Import source filtering

importSources maps import sources or member namespaces to booleans. That lets you ignore one hook library without skipping every use* call in the file.

Examples

Incorrect

function UserProfile({ userId }) {
  if (userId) {
    useEffect(() => {}, [userId]);
  }
}

Correct

function UserProfile({ userId }) {
  useEffect(() => {
    if (userId) loadUser(userId);
  }, [userId]);
}

Options

Option	Type	Default	Notes
ignoreHooks	string[]	[]	Exact hook names to skip.
importSources	Record<string, boolean>	{}	true checks a source, false skips it.
onlyHooks	string[]	[]	Whitelist mode. When present, the other filters are ignored.

Related rules

use-exhaustive-dependenciesChecks the dependency array once the hook is in the right place

require-named-effect-functionsChecks the callback shape passed to effect hooks