Merge pull request #3018 from tanem/chore/migrate-eslint-react

chore(deps): replace eslint-plugin-react with @eslint-react/eslint-plugin

Author: tanem

eslint.config.mjs

@@ -1,57 +1,40 @@
-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 perfectionist from 'eslint-plugin-perfectionist'
 import reactHooks from 'eslint-plugin-react-hooks'
 import simpleImportSort from 'eslint-plugin-simple-import-sort'
 import globals from 'globals'
 import tseslint from 'typescript-eslint'
 
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = path.dirname(__filename)
-
 export default tseslint.config(
   {
     ignores: ['**/compiled/', '**/coverage/', '**/dist/', '**/node_modules/'],
   },
   js.configs.recommended,
   ...tseslint.configs.recommended,
-  react.configs.flat.recommended,
-  eslintConfigPrettier,
+  eslintReact.configs['recommended-typescript'],
   {
-    languageOptions: {
-      parserOptions: {
-        ecmaFeatures: {
-          jsx: true,
-        },
-        project: path.join(__dirname, 'tsconfig.eslint.json'),
-      },
-    },
-
     plugins: {
+      perfectionist,
       'react-hooks': reactHooks,
       'simple-import-sort': simpleImportSort,
     },
 
     rules: {
-      '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',
+      ...reactHooks.configs['recommended-latest'].rules,
+      // eslint-plugin-react-hooks (above) is the source of truth for hooks
+      // rules, since it's backed by the React team's compiler. Disable the
+      // overlapping rules from @eslint-react/eslint-plugin's recommended
+      // config to avoid duplicate reports.
+      '@eslint-react/exhaustive-deps': 'off',
+      '@eslint-react/rules-of-hooks': 'off',
+      'perfectionist/sort-jsx-props': 'error',
       'simple-import-sort/exports': 'error',
       'simple-import-sort/imports': 'error',
       'sort-imports': 'off',
       'sort-keys': 'error',
     },
-
-    settings: {
-      react: {
-        version: 'detect',
-      },
-    },
   },
   {
     files: ['**/*.js'],
@@ -61,7 +44,6 @@ export default tseslint.config(
       },
     },
     rules: {
-      '@typescript-eslint/explicit-module-boundary-types': 'off',
       '@typescript-eslint/no-require-imports': 'off',
     },
   },
@@ -73,17 +55,5 @@ 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',
-    },
-  },
+  eslintConfigPrettier,
 )

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])
@@ -57,6 +57,10 @@ export default function NavigationProgress({
   const [isRouteChanging, setIsRouteChanging] = useState(false)
   const [loadingKey, setLoadingKey] = useState(0)
 
+  // Read directly during render to lazily create a stable context value
+  // once; useRef's initial-value argument is only ever used on the very
+  // first render.
+  // eslint-disable-next-line react-hooks/refs
   const contextValue = useRef<NavigationProgressContextType>({
     start: () => {
       setIsRouteChanging(true)
@@ -67,12 +71,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>
   )
 }