logoESLint React

Roadmap

Milestone 4.0 (Beta)

System Requirements

Minimum supported versions:

  • Node.js: 22.0.0
  • ESLint: 10.x.x
  • TypeScript: 5

New Plugins

  • eslint-plugin-react-jsx - New dedicated plugin for React Flavored JSX rules

Relocated Rules (to eslint-plugin-react-jsx)

  • react-x/jsx-key-before-spread -> react-jsx/runtime (consolidated)
  • react-x/jsx-no-comment-textnodes -> react-jsx/no-comment-textnodes (renamed)
  • react-x/no-children-prop -> react-jsx/no-children-prop
  • react-x/no-useless-fragment -> react-jsx/no-useless-fragment
  • react-dom/no-namespace -> react-jsx/runtime (consolidated)

New Rules

  • react-jsx/no-children-prop-with-children - Disallows passing children as a prop when children are also passed as nested content

Rule Prefix Changes (in @eslint-react/eslint-plugin)

  • @eslint-react/rsc/<rule> -> @eslint-react/rsc-<rule>
  • @eslint-react/dom/<rule> -> @eslint-react/dom-<rule>
  • @eslint-react/web-api/<rule> -> @eslint-react/web-api-<rule>
  • @eslint-react/naming-convention/<rule> -> @eslint-react/naming-convention-<rule>
  • @eslint-react/debug/<rule> -> @eslint-react/debug-<rule>

Milestone 3.0 (RC)

System Requirements

Minimum supported versions:

  • Node.js: 22.0.0 (raised from 20.19.0)
  • ESLint: 10.0.0
  • TypeScript: 5

New Rules

  • react-x/component-hook-factories - Validates against higher order functions defining nested components or hooks
  • react-x/error-boundaries - Validates usage of Error Boundaries instead of try/catch for errors in child components
  • react-x/exhaustive-deps - Enforces that React hook dependency arrays contain all reactive values used in the callback
  • react-x/immutability (Experimental) - Validates against mutating props, state, and other values that are immutable
  • react-x/no-mixing-controlled-and-uncontrolled - Validates against mixing controlled and uncontrolled prop patterns
  • react-x/prefer-set-state-callback - Enforces using callback form of setState when the new state is computed from the previous state
  • react-x/purity (Experimental) - Validates that components and hooks are pure
  • react-x/refs (Experimental) - Validates correct usage of refs by checking that ref.current is not read or written during render
  • react-x/rules-of-hooks - Enforces the Rules of Hooks
  • react-x/set-state-in-effect - Validates against calling setState synchronously in an effect
  • react-x/set-state-in-render - Validates against unconditionally setting state during render
  • react-x/static-components - Validates that components are static, not recreated every render
  • react-x/unstable-rules-of-props (Experimental) - Consolidates state-related validations including prefer-set-state-callback
  • react-x/unstable-rules-of-state (Experimental) - Consolidates state-related validations
  • react-x/unsupported-syntax - Validates against syntax that React Compiler does not support (eval, with, IIFE in JSX)
  • react-x/use-memo - Validates that useMemo is called with a callback that returns a value
  • react-x/use-state - Enforces correct usage of the useState hook (moved from eslint-plugin-react-naming-convention)

Removed Rules

  • react-x/jsx-no-duplicate-props - Removed (LSP and Language Features natively report duplicate JSX props)
  • react-x/jsx-no-iife - Consolidated into unsupported-syntax
  • react-x/jsx-no-undef - Removed (ESLint v10.0.0 now tracks JSX references natively)
  • react-x/jsx-uses-react - Removed (ESLint v10.0.0 now handles JSX variable tracking natively)
  • react-x/jsx-uses-vars - Removed (ESLint v10.0.0 now handles JSX variable tracking natively)
  • react-x/no-default-props - Removed
  • react-x/no-forbidden-props - Removed
  • react-x/no-prop-types - Removed
  • react-x/no-string-refs - Removed
  • react-x/no-unnecessary-key - Removed
  • react-x/no-unnecessary-use-ref - Removed
  • react-x/no-useless-forward-ref - Consolidated into no-forward-ref
  • react-x/prefer-read-only-props - Consolidated into immutability
  • react-x/prefer-use-state-lazy-initialization - Consolidated into use-state
  • react-naming-convention/component-name - Removed
  • react-naming-convention/filename-extension - Removed
  • react-naming-convention/filename - Removed
  • react-naming-convention/use-state - Moved to react-x/use-state

Removed Plugins

  • eslint-plugin-react-hooks-extra - Migrated to eslint-plugin-react-x

Milestone 2.0 (2025-09-26)

System Requirements

Minimum supported versions:

  • Node.js: 22.0.0
  • ESLint: 10.0.0
  • TypeScript: 5

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-jsx - React Flavored JSX rules
  • eslint-plugin-react-rsc - Rules for React Server Components
  • eslint-plugin-react-dom - DOM Specific rules for React DOM
  • eslint-plugin-react-web-api - Rules for interacting with Web APIs
  • eslint-plugin-react-naming-convention - Naming convention rules designed for React projects
  • eslint-plugin-react-hooks-extra - Extra Hooks rules for React (removed in 2.14.0, rules migrated to eslint-plugin-react-x)
  • ... (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-jsx/no-comment-textnodes - Disallow text nodes with comments in JSX (Replaces no-comment-textnodes)
  • react-x/no-context-provider - Replaces usage of <Context.Provider> with <Context> (React 19)
  • react-x/no-forward-ref - Replaces usage of forwardRef with passing ref as a prop (React 19)
  • react-x/no-use-context - Replaces usage 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 usage of ReactDOM.hydrate() with hydrateRoot() (React 19)
  • react-dom/no-render - Replaces usage 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 the context name to be a valid component name with the suffix Context (React 19)

Removed Rules

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

On this page