No Nested Hook Calls

Suggestion

small-rules/no-nested-hook-calls

Disallow nesting a hook call inside another hook call.

Rationale

A hook call nested inside another hook call hides a value that never gets a name. Take useAttribute(useCharacter(), "Health"). To see what the outer hook receives, the reader has to run the inner call in their head. The line also grows long enough to wrap.

Assign the inner result to a const first. The variable gives the value a name and keeps each hook call on its own line. Later code can reuse it too.

The rule only checks the expression of a hook call: its arguments and its callee. A hook called inside a function passed to another hook, such as a component handed to an overlay hook, belongs to use-hook-at-top-level.

Diagnostic Messages

nestedHookCall

`{{inner}}` is called inside the `{{outer}}` call. Assign its result to a variable first.

Configuration

This rule does not accept options.

.oxlintrc.json

{
  "jsPlugins": [
    "@pobammer-ts/small-rules"
  ],
  "rules": {
    "small-rules/no-nested-hook-calls": "error"
  }
}

oxlint.config.ts

import { defineConfig } from "oxlint";

export default defineConfig({
  jsPlugins: ["@pobammer-ts/small-rules"],
  rules: {
    "small-rules/no-nested-hook-calls": "error",
  },
});

Examples

Hook call nested in a hook argument

const health = useAttribute(useCharacter(), "Health");

Hook result assigned before use

const character = useCharacter();
const health = useAttribute(character, "Health");