|
| 1 | +--- |
| 2 | +title: "Announcing v2.0.0" |
| 3 | +description: "A major release embracing modern JavaScript standards with powerful new rules and DX improvements." |
| 4 | +--- |
| 5 | + |
| 6 | +<Callout type="info"> |
| 7 | + Some of the new features in this release were already previewed in the `1.5.x` versions. |
| 8 | +</Callout> |
| 9 | + |
| 10 | +## **Embracing Modern JavaScript Standards** |
| 11 | + |
| 12 | +To align with the direction of the JavaScript ecosystem, v2.0.0 introduces the following significant changes: |
| 13 | + |
| 14 | +1. **ESM-Only**: `eslint-react.xyz` is now distributed exclusively as ECMAScript Modules (ESM). |
| 15 | +2. **Flat Config Exclusive**: We have dropped support for the legacy `.eslintrc` format and now exclusively support ESLint's Flat Config for more powerful and flexible configurations. |
| 16 | +3. **Updated Environment Requirements**: |
| 17 | + - **Node.js**: `18.x` ↦ `20.x` |
| 18 | + - **ESLint**: `8.x` ↦ `9.x` |
| 19 | + - **TypeScript**: `4.x` ↦ `5.x` |
| 20 | + |
| 21 | +## **Rule Refactoring: More Consistent and Intuitive** |
| 22 | + |
| 23 | +We have refactored our rules to make them easier to understand and use. |
| 24 | + |
| 25 | +- **Rule Renaming**: Some rules have been renamed. For example, `ensure-forward-ref-using-ref` is now the more concise `no-useless-forward-ref`. |
| 26 | + |
| 27 | +- **Rule Consolidation**: Scenarios that previously required configuring opposing rules are now handled by a single rule, simplifying your setup. |
| 28 | + |
| 29 | + ```javascript |
| 30 | + // Old way: Two opposing rules |
| 31 | + // "react-hooks-extra/no-direct-set-state-in-use-effect": "warn", |
| 32 | + // "react-hooks-extra/no-direct-set-state-in-use-layout-effect": "warn", |
| 33 | + |
| 34 | + // New way: Single consolidated rule handling all useEffect variants |
| 35 | + "react-x/no-direct-set-state-in-use-effect": "warn", |
| 36 | + ``` |
| 37 | + |
| 38 | +- **Rule Migration**: Several generic Hooks rules from the `react-hooks-extra` package have been moved to the core `react-x` plugin, such as `no-unnecessary-use-prefix`. |
| 39 | + |
| 40 | +## **Introducing Powerful New Rules** |
| 41 | + |
| 42 | +This release adds several new rules to help you write cleaner and more robust React code. |
| 43 | + |
| 44 | +- **`react-x/no-unused-props`**: TSC-backed rule that flags component props that are defined but never used (credits to [@ulrichstark](https://github.com/ulrichstark) for the implementation). |
| 45 | +- **`react-x/no-unnecessary-key`**: Flags unnecessary `key` props on elements that are not an iterator when rendering lists (credits to [@kachkaev](https://github.com/kachkaev) for the idea). |
| 46 | +- **`react-dom/no-string-style-prop`**: Disallows using string values for the `style` prop, useful in non-TypeScript environments like MDX files (proposed by [@karlhorky](https://github.com/karlhorky)). |
| 47 | +- **`react-dom/prefer-namespace-import`**: Enforces using a namespace import for `react-dom` (The React DOM version of `react-x/prefer-namespace-import`). |
| 48 | + |
| 49 | +## **Developer Experience (DX) Improvements** |
| 50 | + |
| 51 | +We believe a great tool should not only find problems but also help you fix them. |
| 52 | + |
| 53 | +- **Enhanced Codemods & Auto-Fixes**: More rules, like `no-forward-ref`, now include codemods to automatically migrate legacy APIs to the new syntax in React 19 and support auto-fixing. |
| 54 | + |
| 55 | + For example, migrating `forwardRef`: |
| 56 | + |
| 57 | + ```tsx |
| 58 | + const MotionButton = React.forwardRef<HTMLButtonElement, HTMLMotionProps<"button">>(({ children, ...rest }, ref) => { |
| 59 | + // ... |
| 60 | + }); |
| 61 | + ``` |
| 62 | + |
| 63 | + can be automatically transformed to: |
| 64 | + |
| 65 | + ```tsx |
| 66 | + const MotionButton = ({ ref, children, ...rest }: HTMLMotionProps<"button"> & { ref?: React.RefObject<HTMLButtonElement | null> }) => { |
| 67 | + // ... |
| 68 | + }; |
| 69 | + ``` |
| 70 | + |
| 71 | + Other rules with React 19 codemods include `no-context-provider` and `no-use-context`. |
| 72 | + |
| 73 | + - `react-x/no-context-provider`: Replaces usages of `useContext(Context)` with `use(Context)`. |
| 74 | + - `react-x/no-use-context`: Replaces usages of `<Context.Provider>` with `<Context>`. |
| 75 | + |
| 76 | +- **New `disable-conflict-eslint-plugin-react` Preset**: If you also use `eslint-plugin-react`, this new preset automatically disables rules that overlap with our plugin, enabling seamless integration. |
| 77 | + |
| 78 | +## **Migration Guide** |
| 79 | + |
| 80 | +To upgrade to v2.0.0, follow these steps: |
| 81 | + |
| 82 | +1. **Update Node.js**: Ensure your environment is running Node.js 20.x or higher. |
| 83 | +2. **Update Dependencies**: Update your `eslint-react.xyz` and related dependencies to the required versions. |
| 84 | +3. **Review Rule Changes**: Check the [Changelog](/docs/changelog#v200-2025-09-26) for a complete list of rule changes and updates. |
| 85 | +4. **Adjust ESLint Configurations**: Update your ESLint configuration to accommodate renamed or consolidated rules (convert to Flat Config if you haven't already). |
| 86 | +5. **Update ESLint Directives**: Use the provided codemods to update any ESLint directives in your codebase. |
| 87 | +6. **Test Your Setup**: Run ESLint on your codebase to identify and fix any issues. |
0 commit comments