chore: enable eslint-plugin-react-hooks and @eslint-react/eslint-plugin

.changeset/quick-zoos-allow.md

@@ -0,0 +1,5 @@
+---
+"@alauda/doom": patch
+---
+
+chore: enable `eslint-plugin-react-hooks` and `@eslint-react/eslint-plugin`, fix related reports

eslint.config.js

@@ -1,8 +1,10 @@
 // @ts-check
 
 import eslint from '@eslint/js'
+import react from '@eslint-react/eslint-plugin'
 import { createTypeScriptImportResolver } from 'eslint-import-resolver-typescript'
 import { importX } from 'eslint-plugin-import-x'
+import * as reactHooks from 'eslint-plugin-react-hooks'
 import { config, configs } from 'typescript-eslint'
 
 export default config(
@@ -12,9 +14,15 @@ export default config(
   eslint.configs.recommended,
   importX.flatConfigs.recommended,
   importX.flatConfigs.typescript,
+  react.configs.recommended,
+  reactHooks.configs['recommended-latest'],
   {
     files: ['**/*.{ts,tsx}'],
-    extends: [configs.eslintRecommended, configs.strictTypeChecked],
+    extends: [
+      configs.eslintRecommended,
+      configs.strictTypeChecked,
+      react.configs['recommended-type-checked'],
+    ],
     languageOptions: {
       parserOptions: {
         projectService: true,

package.json

@@ -121,6 +121,7 @@
     "clean-pkg-json": "^1.3.0",
     "eslint-import-resolver-typescript": "^4.4.2",
     "eslint-plugin-import-x": "^4.15.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "nano-staged": "^0.8.0",
     "npm-run-all2": "^8.0.4",
     "prettier": "^3.5.3",

src/global/SiteOverrides/index.tsx

@@ -71,7 +71,14 @@ export const SiteOverrides = () => {
     requestAnimationFrame(() => {
       document.title = newTitle
     })
-  }, [title])
+  }, [
+    articleTitle,
+    frontmatter.title,
+    frontmatter.titleSuffix,
+    pageType,
+    siteData,
+    title,
+  ])
 
   useEffect(() => {
     if (!logoText) {

src/global/VersionsNav/index.tsx

@@ -106,7 +106,7 @@ const VersionsNav_ = () => {
     }
 
     void fetchVersions().catch(noop)
-  }, [])
+  }, [version, versionsBase])
 
   // hack way to detect nav menu recreation on theme change
   useEffect(() => {
@@ -120,6 +120,7 @@ const VersionsNav_ = () => {
     })
     const newNavMenu = getNavMenu()
     if (newNavMenu !== navMenu) {
+      // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
       setNavMenu(newNavMenu)
     } else if (navMenu.parentNode) {
       observer.observe(navMenu.parentNode, { childList: true })

src/runtime/components/ExternalSiteLink.tsx

@@ -31,7 +31,10 @@ const ExternalSiteLink_ = ({
 }: ExternalSiteLinkProps) => {
   const isPrint = useIsPrint()
 
-  const site = useMemo(() => virtual.sites?.find((s) => s.name === name), [])
+  const site = useMemo(
+    () => virtual.sites?.find((s) => s.name === name),
+    [name],
+  )
   const lang = useLang()
 
   if (!site) {

src/runtime/components/K8sCrd.tsx

@@ -42,6 +42,7 @@ export const K8sCrdSchemaPart = ({
   }, [])
 
   useEffect(() => {
+    // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
     setOpen(expandAll)
   }, [expandAll])
 
@@ -73,8 +74,18 @@ export const K8sCrdSchemaPart = ({
         title={
           <>
             {name}
-            {type && <code>{type}</code>}
-            {required && <Badge>required</Badge>}
+            {type && (
+              <>
+                {' '}
+                <code>{type}</code>
+              </>
+            )}
+            {required && (
+              <>
+                {' '}
+                <Badge>required</Badge>
+              </>
+            )}
           </>
         }
         open={open}
@@ -122,8 +133,7 @@ export const K8sCrdSchema = ({
       <Markdown>{description}</Markdown>
       <div className="flex items-center">
         <span>
-          <code>{version}</code>
-          <Badge>version</Badge>
+          <code>{version}</code> <Badge>version</Badge>
         </span>
         {!isPrint && properties != null && (
           <Button
@@ -171,7 +181,7 @@ export const K8sCrd = ({ name, crdPath }: K8sCrdProps) => {
         }
         return crd.metadata.name === name
       }) || [],
-    [],
+    [crdPath, name],
   )
 
   if (!crd) {
@@ -182,8 +192,7 @@ export const K8sCrd = ({ name, crdPath }: K8sCrdProps) => {
   return (
     <>
       <X.p>
-        <code>{crd.spec.group}</code>
-        <Badge>group</Badge>
+        <code>{crd.spec.group}</code> <Badge>group</Badge>
       </X.p>
       {crd.spec.versions.map((version) => (
         <K8sCrdSchema

src/runtime/components/K8sPermissionTable.tsx

@@ -84,33 +84,32 @@ const RolesPermission = ({
   })
 }
 
+const allFunctionResources = Object.values(functionResourcesMap).reduce<
+  Partial<Record<string, FunctionResource>>
+>(
+  (acc, curr) =>
+    Object.assign(
+      acc,
+      ...curr.map((fr) => ({ [fr.metadata.name]: fr })),
+    ) as Partial<Record<string, FunctionResource>>,
+  {},
+)
+
 export const K8sPermissionTable = ({ functions }: K8sPermissionTableProps) => {
-  const allFunctionResources = useMemo(
+  const functionResources = useMemo(
     () =>
-      Object.values(functionResourcesMap).reduce<
-        Partial<Record<string, FunctionResource>>
-      >(
-        (acc, curr) =>
-          Object.assign(
-            acc,
-            ...curr.map((fr) => ({ [fr.metadata.name]: fr })),
-          ) as Partial<Record<string, FunctionResource>>,
-        {},
-      ),
-    [],
+      functions.flatMap((name) => {
+        const matched = allFunctionResources[name]
+        if (!matched) {
+          console.error(`FunctionResource \`${name}\` not found!\n`)
+          return []
+        }
+        return matched
+      }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    functions,
   )
 
-  const functionResources = useMemo(() => {
-    return functions.flatMap((name) => {
-      const matched = allFunctionResources[name]
-      if (!matched) {
-        console.error(`FunctionResource \`${name}\` not found!\n`)
-        return []
-      }
-      return matched
-    })
-  }, [...functions])
-
   const roleTemplates = useMemo(
     () =>
       sortBy(Object.values(roleTemplatesMap).flat(), [

src/runtime/components/Mermaid.tsx

@@ -32,7 +32,7 @@ export const Mermaid = ({ className, children }: MermaidProps) => {
     }
 
     void render()
-  }, [children, isDark])
+  }, [children, id, isDark])
 
   return (
     <div

src/runtime/components/OpenAPIPath.tsx

@@ -53,10 +53,19 @@ export const OpenAPIParameters = ({
           typeNode = <RefLink $ref={type.$ref} />
         }
         return (
+          // eslint-disable-next-line @eslint-react/no-array-index-key
           <X.li key={index}>
-            <code>{paramObj.name}</code>(<em>in {paramObj.in}</em>): {typeNode}
-            {paramObj.required && <Badge>required</Badge>}
-            <Markdown>{paramObj.description}</Markdown>
+            <code>{paramObj.name}</code> (<em>in {paramObj.in}</em>): {typeNode}
+            {paramObj.required && (
+              <>
+                {' '}
+                <Badge>required</Badge>
+              </>
+            )}
+            <>
+              {' '}
+              <Markdown>{paramObj.description}</Markdown>
+            </>
           </X.li>
         )
       })}
@@ -195,7 +204,7 @@ export const OpenAPIPath = ({
       }
     }
     return []
-  }, [])
+  }, [openapiPath_, page.routePath, path])
 
   if (!pathItem || !openapi) {
     console.error(`No OpenAPI path definition found for ${path}`)

src/runtime/components/OpenAPIRef.tsx

@@ -105,8 +105,8 @@ export const OpenAPIProperties = ({
 }) => {
   return (
     <X.ul>
-      {Object.entries(properties).map(([name, property], index) => (
-        <X.li key={index}>
+      {Object.entries(properties).map(([name, property]) => (
+        <X.li key={name}>
           <OpenAPIProperty name={name} property={property} openapi={openapi} />
         </X.li>
       ))}
@@ -172,15 +172,10 @@ export const OpenAPIRef = ({
       }
     }
     return []
-  }, [])
-
-  if (!schemaItem || !openapi) {
-    console.error(`No OpenAPI schema definition found for ${schema}\n`)
-    return null
-  }
+  }, [openapiPath_, schema])
 
   const refs = useMemo(() => {
-    if (collectRefs) {
+    if (collectRefs && openapi) {
       return getRefsForSchema(
         openapi,
         schema,
@@ -189,6 +184,11 @@ export const OpenAPIRef = ({
     }
   }, [collectRefs, openapi, page.routePath, schema])
 
+  if (!schemaItem || !openapi) {
+    console.error(`No OpenAPI schema definition found for ${schema}\n`)
+    return null
+  }
+
   return (
     <>
       <HeadingTitle uid={uid} slug={schema} level={2}>