Prefer Context Stack

SuggestionAuto-fixable

small-rules/prefer-context-stack

Prefer a local ContextStack component over directly nesting multiple context providers.

Diagnostic Messages

preferContextStack

Use the local `ContextStack` component instead of nesting multiple context providers directly.

Configuration

This rule does not accept options.

{
  "jsPlugins": [
    "@pobammer-ts/small-rules"
  ],
  "rules": {
    "small-rules/prefer-context-stack": "error"
  }
}

Examples

Nested context providers

import ContextStack from "../providers/context-stack";

export function Example(locale: string, theme: string) {
    return <ThemeContext.Provider value={theme}><LocaleContext.Provider value={locale}><App /></LocaleContext.Provider></ThemeContext.Provider>;
}

After auto-fix

import ContextStack from "../providers/context-stack";

export function Example(locale: string, theme: string) {
    return <ContextStack providers={[<ThemeContext.Provider value={theme} />, <LocaleContext.Provider value={locale} />]}><App /></ContextStack>;
}

Single context provider

import ContextStack from "../providers/context-stack";

export function Example(theme: string) {
    return <ThemeContext.Provider value={theme}><App /></ThemeContext.Provider>;
}

Related Rules

Prefer Local Portal ComponentRelatedLocal wrapper components for nested providers/portals/padding are the same composition move.Prefer Padding ComponentsRelatedContext stacks and padding wrappers both collapse repeated JSX boilerplate into local components.