prefer-context-stack

Replaces direct provider chains with a local ContextStack component when one is available.

Rule details Suggestion

This rule looks for JSX like A.Provider -> B.Provider -> children and reports it when your project already has a local ContextStack component.

It stays conservative:

• It only reports chains with more than one provider.
• It skips nested providers that are already part of a larger chain.
• It skips wrappers that also render siblings or extra content.
• It only auto-fixes when the current file already imports exactly one local ContextStack identifier and the file is .jsx or .tsx.

Discovery is local

The rule does not assume a package import. It only works with a local ContextStack component that it can discover in your project or inspect through a relative import.

Examples

Incorrect

return (
  <ThemeContext.Provider value={theme}>
    <LocaleContext.Provider value={locale}>
      <App />
    </LocaleContext.Provider>
  </ThemeContext.Provider>
);

Correct

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

Related rules

prefer-local-portal-component Replaces repeated low-level portal code with a local component

require-react-display-names Keeps shared React components easy to spot in DevTools