Roadmap

Milestone 4.0 (TBD)

System Requirements

Minimum supported versions:

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

Removed Rules

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

Removed Plugins

• eslint-plugin-react-hooks-extra - No longer needed as all relevant rules have been migrated to eslint-plugin-react-x or replaced by new introduced rules from eslint-plugin-react-hooks (TBD)

Milestone 3.0 (TBD)

System Requirements

Minimum supported versions:

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

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
  A fast implementation 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
  A fast implementation of set-state-in-render that doesn't require React Compiler integration
• react-x/static-components - Validates that components are static, not recreated every render
  A fast implementation of static-components that doesn't require React Compiler integration
• react-x/component-hook-factories - Validates against higher order functions defining nested components or hooks
  A fast implementation of component-hook-factories that doesn't require React Compiler integration
• react-x/function-component-definition - Enforces the definition of function components (Rel1cx/eslint-react#739)

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

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