logoESLint React

Roadmap

Milestone 4.0 (TBD)

System Requirements

Minimum supported versions:

  • Node.js: 28.x.x
  • ESLint: 10.x.x
  • TypeScript: 5.9.2

Removed Rules

  • react-hooks-extra/no-direct-set-state-in-use-effect - Replaced by react-x/set-state-in-effect (TBD)

Removed Plugins

Milestone 3.0 (TBD)

System Requirements

Minimum supported versions:

  • Node.js: 24.8.0
  • ESLint: 9.36.0
  • TypeScript: 5.9.2

New Rules

  • react-x/set-state-in-effect - Validates against calling setState synchronously in an effect, which can lead to re-renders that degrade performance (TBD)
    (lightweight, performant version of set-state-in-effect that doesn't require React Compiler integration)
  • react-x/set-state-in-render - Validates against setting state during render, which can trigger additional renders and potential infinite render loops (TBD)
    (lightweight, performant version of set-state-in-render that doesn't require React Compiler integration)
  • react-x/function-component-definition - Enforces the definition of function components (Rel1cx/eslint-react#739)
  • react-dom/no-unmount-component-at-node - Replaces usages of ReactDom.unmountComponentAtNode() with root.unmount() (React 19)

Deprecated Rules

  • react-hooks-extra/no-direct-set-state-in-use-effect - Replaced by react-x/set-state-in-effect (TBD)

Milestone 2.0 (2025-09-26)

System Requirements

Minimum supported versions:

  • Node.js: 20.19.0
  • ESLint: 9.36.0
  • TypeScript: 5.9.2

Package Distribution

  • Publish ESM-Only packages

Plugins (with ecological niche explanation)

  • eslint-plugin-react-x - X Rules (renderer-agnostic, compatible with x-platform)
  • eslint-plugin-react-dom - DOM Specific rules for React DOM
  • eslint-plugin-react-web-api - Rules for interacting with Web APIs
  • eslint-plugin-react-hooks-extra - Extra Hooks rules for React
  • eslint-plugin-react-naming-convention - Naming convention rules designed for React projects
  • ... (Free to combine with other plugins from the community)

Add codemod feature to rules that can be transformed (using auto-fix) safely

  • react-x/no-component-did-update
  • react-x/no-component-will-receive-props
  • react-x/no-component-will-update
  • react-x/no-context-provider
  • react-x/no-forward-ref
  • react-x/no-string-refs

Add auto-fix feature to rules that can be auto-fixed safely

  • react-x/prefer-namespace-import
  • react-dom/prefer-namespace-import

Add suggestion-fix feature to rules that can be fixed interactively

  • react-dom/no-missing-button-type
  • react-dom/no-missing-iframe-sandbox
  • react-dom/no-unsafe-target-blank

New Rules

  • react-x/jsx-no-comment-textnodes - Disallow text nodes with comments in JSX (Replaces no-comment-textnodes)
  • react-x/no-context-provider - Replaces usages of <Context.Provider> with <Context> (React 19)
  • react-x/no-forward-ref - Replaces usages of forwardRef with passing ref as a prop (React 19)
  • react-x/no-use-context - Replaces usages of useContext with use (React 19)
  • react-x/prefer-namespace-import - Enforces the use of namespace imports for React (Replaces prefer-react-namespace-import)
  • react-dom/no-hydrate - Replaces usages of ReactDom.hydrate() with hydrateRoot() (React 19)
  • react-dom/no-render - Replaces usages of ReactDom.render() with createRoot(node).render() (React 19)
  • react-dom/no-use-form-state - Replaces the usages of useFormState() to use useActionState() (React 19)
  • react-dom/prefer-namespace-import - Enforces the use of namespace imports for ReactDOM
  • naming-convention/context-name - Enforces context name to be a valid component name with the suffix Context (React 19)

Removed Rules

  • react-x/avoid-shorthand-boolean - Replaced by jsx-shorthand-boolean
  • react-x/avoid-shorthand-fragment - Replaced by jsx-shorthand-fragment
  • react-x/no-comment-textnodes - Replaced by jsx-no-comment-textnodes
  • react-x/prefer-react-namespace-import - Replaced by prefer-namespace-import
  • react-x/prefer-shorthand-boolean - Replaced by jsx-shorthand-boolean
  • react-x/prefer-shorthand-fragment - Replaced by jsx-shorthand-fragment
  • react-hooks-extra/no-direct-set-state-in-use-layout-effect - Merged into hooks-extra/no-direct-set-state-in-use-effect