feat(lint): integrate eslint-plugin-react-hooks with rules-of-hooks and exhaustive-deps as errors

Signed-off-by: Matthieu MOREL <matthieu.morel35@gmail.com>

Author: mmorel-35

.eslintrc.js

@@ -21,7 +21,7 @@ module.exports = {
     "plugin:react/recommended",
     "plugin:prettier/recommended",
   ],
-  plugins: ["react", "import", "jest", "prettier"],
+  plugins: ["react", "react-hooks", "import", "jest", "prettier"],
   settings: {
     react: {
       pragma: "React",
@@ -74,5 +74,7 @@ module.exports = {
     "react/display-name": 0,
     "import/no-extraneous-dependencies": 2,
     "react/jsx-filename-extension": 2,
+    "react-hooks/rules-of-hooks": 2,
+    "react-hooks/exhaustive-deps": 2,
   },
 }

flavors/swagger-ui-react/index.jsx

@@ -93,6 +93,7 @@ const SwaggerUI = ({
     })
 
     setSystem(systemInstance)
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally mount-only: creates the initial SwaggerUI system instance once; prop changes after mount are handled by the dedicated effects below
   }, [])
 
   useEffect(() => {
@@ -106,6 +107,7 @@ const SwaggerUI = ({
         }
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- prevUrl is intentionally excluded: it is a usePrevious ref value and adding it would cause the effect to double-fire when the URL changes
   }, [system, url])
 
   useEffect(() => {
@@ -121,6 +123,7 @@ const SwaggerUI = ({
         system.specActions.updateSpec(updatedSpec)
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- prevSpec is intentionally excluded: it is a usePrevious ref value and adding it would cause the effect to double-fire when the spec changes
   }, [system, spec])
 
   return SwaggerUIComponent ? <SwaggerUIComponent /> : null

package-lock.json

@@ -147,6 +147,7 @@
     "eslint-plugin-jest": "^28.12.0",
     "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "=7.0.1",
     "esm": "=3.2.25",
     "expect": "=29.7.0",
     "express": "^4.22.1",

package.json

@@ -45,15 +45,15 @@ const JSONSchema = forwardRef(
     const renderedSchemas = useRenderedSchemas(schema)
     const constraints = fn.stringifyConstraints(schema)
     const Accordion = useComponent("Accordion")
-    const Keyword$schema = useComponent("Keyword$schema")
-    const Keyword$vocabulary = useComponent("Keyword$vocabulary")
-    const Keyword$id = useComponent("Keyword$id")
-    const Keyword$anchor = useComponent("Keyword$anchor")
-    const Keyword$dynamicAnchor = useComponent("Keyword$dynamicAnchor")
-    const Keyword$ref = useComponent("Keyword$ref")
-    const Keyword$dynamicRef = useComponent("Keyword$dynamicRef")
-    const Keyword$defs = useComponent("Keyword$defs")
-    const Keyword$comment = useComponent("Keyword$comment")
+    const KeywordSchema = useComponent("Keyword$schema")
+    const KeywordVocabulary = useComponent("Keyword$vocabulary")
+    const KeywordId = useComponent("Keyword$id")
+    const KeywordAnchor = useComponent("Keyword$anchor")
+    const KeywordDynamicAnchor = useComponent("Keyword$dynamicAnchor")
+    const KeywordRef = useComponent("Keyword$ref")
+    const KeywordDynamicRef = useComponent("Keyword$dynamicRef")
+    const KeywordDefs = useComponent("Keyword$defs")
+    const KeywordComment = useComponent("Keyword$comment")
     const KeywordAllOf = useComponent("KeywordAllOf")
     const KeywordAnyOf = useComponent("KeywordAnyOf")
     const KeywordOneOf = useComponent("KeywordOneOf")
@@ -193,17 +193,17 @@ const JSONSchema = forwardRef(
                     />
                     <KeywordDefault schema={schema} />
                     <KeywordExamples schema={schema} />
-                    <Keyword$schema schema={schema} />
-                    <Keyword$vocabulary schema={schema} />
-                    <Keyword$id schema={schema} />
-                    <Keyword$anchor schema={schema} />
-                    <Keyword$dynamicAnchor schema={schema} />
-                    <Keyword$ref schema={schema} />
+                    <KeywordSchema schema={schema} />
+                    <KeywordVocabulary schema={schema} />
+                    <KeywordId schema={schema} />
+                    <KeywordAnchor schema={schema} />
+                    <KeywordDynamicAnchor schema={schema} />
+                    <KeywordRef schema={schema} />
                     {!isCircular && isExpandable && (
-                      <Keyword$defs schema={schema} />
+                      <KeywordDefs schema={schema} />
                     )}
-                    <Keyword$dynamicRef schema={schema} />
-                    <Keyword$comment schema={schema} />
+                    <KeywordDynamicRef schema={schema} />
+                    <KeywordComment schema={schema} />
                     <ExtensionKeywords schema={schema} />
                   </>
                 )}

src/core/plugins/json-schema-2020-12/components/JSONSchema/JSONSchema.jsx

@@ -5,7 +5,7 @@ import React from "react"
 
 import { schema } from "../../prop-types"
 
-const $anchor = ({ schema }) => {
+const Anchor = ({ schema }) => {
   if (!schema?.$anchor) return null
 
   return (
@@ -20,8 +20,8 @@ const $anchor = ({ schema }) => {
   )
 }
 
-$anchor.propTypes = {
+Anchor.propTypes = {
   schema: schema.isRequired,
 }
 
-export default $anchor
+export default Anchor

src/core/plugins/json-schema-2020-12/components/keywords/$anchor.jsx

@@ -5,7 +5,7 @@ import React from "react"
 
 import { schema } from "../../prop-types"
 
-const $comment = ({ schema }) => {
+const Comment = ({ schema }) => {
   if (!schema?.$comment) return null
 
   return (
@@ -20,8 +20,8 @@ const $comment = ({ schema }) => {
   )
 }
 
-$comment.propTypes = {
+Comment.propTypes = {
   schema: schema.isRequired,
 }
 
-export default $comment
+export default Comment

src/core/plugins/json-schema-2020-12/components/keywords/$comment.jsx

@@ -8,7 +8,7 @@ import { schema } from "../../prop-types"
 import { useComponent, useIsExpanded, usePath, useLevel } from "../../hooks"
 import { JSONSchemaLevelContext, JSONSchemaPathContext } from "../../context"
 
-const $defs = ({ schema }) => {
+const Defs = ({ schema }) => {
   const $defs = schema?.$defs || {}
   const pathToken = "$defs"
   const { path } = usePath(pathToken)
@@ -86,8 +86,8 @@ const $defs = ({ schema }) => {
   )
 }
 
-$defs.propTypes = {
+Defs.propTypes = {
   schema: schema.isRequired,
 }
 
-export default $defs
+export default Defs

src/core/plugins/json-schema-2020-12/components/keywords/$defs.jsx

@@ -5,7 +5,7 @@ import React from "react"
 
 import { schema } from "../../prop-types"
 
-const $dynamicAnchor = ({ schema }) => {
+const DynamicAnchor = ({ schema }) => {
   if (!schema?.$dynamicAnchor) return null
 
   return (
@@ -20,8 +20,8 @@ const $dynamicAnchor = ({ schema }) => {
   )
 }
 
-$dynamicAnchor.propTypes = {
+DynamicAnchor.propTypes = {
   schema: schema.isRequired,
 }
 
-export default $dynamicAnchor
+export default DynamicAnchor

src/core/plugins/json-schema-2020-12/components/keywords/$dynamicAnchor.jsx

@@ -5,7 +5,7 @@ import React from "react"
 
 import { schema } from "../../prop-types"
 
-const $dynamicRef = ({ schema }) => {
+const DynamicRef = ({ schema }) => {
   if (!schema?.$dynamicRef) return null
 
   return (
@@ -20,8 +20,8 @@ const $dynamicRef = ({ schema }) => {
   )
 }
 
-$dynamicRef.propTypes = {
+DynamicRef.propTypes = {
   schema: schema.isRequired,
 }
 
-export default $dynamicRef
+export default DynamicRef