Migrate from eslint-plugin-react to @eslint-react/eslint-plugin for ESLint 10

eslint.config.mjs

@@ -2,8 +2,8 @@ import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 
 import js from '@eslint/js'
+import eslintReact from '@eslint-react/eslint-plugin'
 import eslintConfigPrettier from 'eslint-config-prettier'
-import react from 'eslint-plugin-react'
 import reactHooks from 'eslint-plugin-react-hooks'
 import simpleImportSort from 'eslint-plugin-simple-import-sort'
 import globals from 'globals'
@@ -18,7 +18,7 @@ export default tseslint.config(
   },
   js.configs.recommended,
   ...tseslint.configs.recommended,
-  react.configs.flat.recommended,
+  eslintReact.configs['recommended-typescript'],
   eslintConfigPrettier,
   {
     languageOptions: {
@@ -36,22 +36,17 @@ export default tseslint.config(
     },
 
     rules: {
+      // Hooks are linted by the official eslint-plugin-react-hooks (React team);
+      // disable @eslint-react's overlapping ports to avoid double-linting.
+      '@eslint-react/exhaustive-deps': 'off',
+      '@eslint-react/rules-of-hooks': 'off',
       'react-hooks/exhaustive-deps': 'warn',
       'react-hooks/rules-of-hooks': 'error',
-      'react/jsx-sort-props': 'error',
-      'react/jsx-uses-react': 'off',
-      'react/react-in-jsx-scope': 'off',
       'simple-import-sort/exports': 'error',
       'simple-import-sort/imports': 'error',
       'sort-imports': 'off',
       'sort-keys': 'error',
     },
-
-    settings: {
-      react: {
-        version: 'detect',
-      },
-    },
   },
   {
     files: ['**/*.js'],
@@ -77,13 +72,6 @@ export default tseslint.config(
     files: ['examples/**/*'],
     rules: {
       '@typescript-eslint/explicit-module-boundary-types': 'off',
-      'react/no-unknown-property': [
-        'error',
-        {
-          ignore: ['jsx'],
-        },
-      ],
-      'react/prop-types': 'off',
     },
   },
 )

examples/next-app-router/components/NavigationProgress.tsx

@@ -4,8 +4,8 @@ import { usePathname, useSearchParams } from 'next/navigation'
 import {
   createContext,
   Suspense,
+  use,
   useCallback,
-  useContext,
   useEffect,
   useRef,
   useState,
@@ -21,7 +21,7 @@ const NavigationProgressContext =
   createContext<NavigationProgressContextType | null>(null)
 
 export function useNavigationProgress() {
-  const context = useContext(NavigationProgressContext)
+  const context = use(NavigationProgressContext)
   if (!context) {
     throw new Error(
       'useNavigationProgress must be used within <NavigationProgress>',
@@ -34,12 +34,12 @@ export function useNavigationProgress() {
 function NavigationComplete({ onComplete }: { onComplete: () => void }) {
   const pathname = usePathname()
   const searchParams = useSearchParams()
-  const currentUrl = useRef(pathname + searchParams.toString())
+  const currentUrlRef = useRef(pathname + searchParams.toString())
 
   useEffect(() => {
     const newUrl = pathname + searchParams.toString()
-    if (newUrl !== currentUrl.current) {
-      currentUrl.current = newUrl
+    if (newUrl !== currentUrlRef.current) {
+      currentUrlRef.current = newUrl
       onComplete()
     }
   }, [pathname, searchParams, onComplete])
@@ -67,12 +67,12 @@ export default function NavigationProgress({
   const handleComplete = useCallback(() => setIsRouteChanging(false), [])
 
   return (
-    <NavigationProgressContext.Provider value={contextValue}>
+    <NavigationProgressContext value={contextValue}>
       <Loading isRouteChanging={isRouteChanging} key={loadingKey} />
       <Suspense>
         <NavigationComplete onComplete={handleComplete} />
       </Suspense>
       {children}
-    </NavigationProgressContext.Provider>
+    </NavigationProgressContext>
   )
 }