chore: enable eslint-plugin-react-hooks

Author: JounQin

eslint.config.js

@@ -2,7 +2,8 @@
 
 import eslint from '@eslint/js'
 import { createTypeScriptImportResolver } from 'eslint-import-resolver-typescript'
-import importX from 'eslint-plugin-import-x'
+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,6 +13,7 @@ export default config(
   eslint.configs.recommended,
   importX.flatConfigs.recommended,
   importX.flatConfigs.typescript,
+  reactHooks.configs['recommended-latest'],
   {
     files: ['**/*.{ts,tsx}'],
     extends: [configs.eslintRecommended, configs.strictTypeChecked],

package.json

@@ -118,6 +118,7 @@
     "clean-pkg-json": "^1.3.0",
     "eslint-import-resolver-typescript": "^4.4.1",
     "eslint-plugin-import-x": "^4.13.3",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "nano-staged": "^0.8.0",
     "npm-run-all2": "^7.0.2",
     "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(() => {

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

@@ -72,8 +72,18 @@ export const K8sCrdSchemaPart = ({
         title={
           <>
             {name}
-            {type && <code>{type}</code>}
-            {required && <Badge>required</Badge>}
+            {type && (
+              <>
+                {' '}
+                <code>{type}</code>
+              </>
+            )}
+            {required && (
+              <>
+                {' '}
+                <Badge>required</Badge>
+              </>
+            )}
           </>
         }
         open={open}
@@ -121,8 +131,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
@@ -172,7 +181,7 @@ export const K8sCrd = ({ name, crdPath }: K8sCrdProps) => {
         }
         return crd.metadata.name === name
       }) || [],
-    [],
+    [crdPath, name],
   )
 
   if (!crd) {
@@ -183,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

@@ -111,6 +111,7 @@ export const K8sPermissionTable = ({ functions }: K8sPermissionTableProps) => {
       }
       return matched
     })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [...functions])
 
   const roleTemplates = useMemo(

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

@@ -197,7 +197,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

@@ -173,15 +173,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,
@@ -190,6 +185,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}>