Skip to content
small-rules

No God Components

Error
small-rules/no-god-components

Enforce React component size and complexity limits inspired by the 'Refactor God Component' checklist.

Diagnostic Messages

exceedsMaxLines
Component '{{name}}' is {{lines}} lines; max allowed is {{max}}. Split into smaller components/hooks.
exceedsTargetLines
Component '{{name}}' is {{lines}} lines; target is {{target}} (max {{max}}). Consider extracting hooks/components.
nullLiteral
Avoid `null` in components; use `undefined` instead.
tooManyProps
Component '{{name}}' destructures {{count}} props; max allowed is {{max}}. Group props or split the component.
tooManyStateHooks
Component '{{name}}' has {{count}} state hooks ({{hooks}}); max allowed is {{max}}. Extract cohesive state into a custom hook.
tsxNestingTooDeep
Component '{{name}}' has TSX nesting depth {{depth}}; max allowed is {{max}}. Extract child components.

Configuration

This rule accepts one options object after the severity.

enforceTargetLinesOptional

Whether to report when exceeding targetLines (soft limit).

Type
boolean
Default
true
ignoreComponentsOptional

Component names to ignore.

Type
Array<string>
Default
maxDestructuredPropsOptional

Maximum number of destructured props in a component parameter.

Type
number
Default
5
maxLinesOptional

Hard maximum lines for a component.

Type
number
Default
200
maxStateHooksOptional

Maximum number of stateful hook calls in a component.

Type
number
Default
5
maxTsxNestingOptional

Maximum JSX/TSX nesting depth in a component.

Type
number
Default
3
stateHooksOptional

Hook names to count toward state complexity.

Type
Array<string>
Default
targetLinesOptional

Soft target lines for a component.

Type
number
Default
120
{
  "jsPlugins": [
    "@pobammer-ts/small-rules"
  ],
  "rules": {
    "small-rules/no-god-components": [
      "error",
      {
        "enforceTargetLines": true,
        "ignoreComponents": [],
        "maxDestructuredProps": 5,
        "maxLines": 200,
        "maxStateHooks": 5,
        "maxTsxNesting": 3,
        "stateHooks": [
          "useState",
          "useReducer",
          "useBinding"
        ],
        "targetLines": 120
      }
    ]
  }
}

Examples

Component exceeds maximum lines
function Big() {
    const a = 1;
    const b = 2;
    const c = 3;
    return <div />;
}
Component within configured limits
function Small({ a, b }) {
    const [count, setCount] = useState(0);
    if (count > 0) setCount(count - 1);
    return <div><span>{a}{b}</span></div>;
}
No Giant ComponentOverlapsLine-count giants and multi-metric god components both target oversized React components.Prefer Use ReducerStrengthensGod-component scoring includes state-hook pressure that prefer-use-reducer also addresses.