fix possible React Hooks issues

.eslintrc.yml

@@ -8,6 +8,7 @@ extends:
   - eslint:recommended
   - plugin:@typescript-eslint/recommended
   - plugin:@typescript-eslint/recommended-requiring-type-checking
+  - plugin:react-hooks/recommended
 rules:
   prefer-const: error
   '@typescript-eslint/no-unsafe-assignment': off

package.json

@@ -77,6 +77,7 @@
     "css-minimizer-webpack-plugin": "^3.0.1",
     "eslint": "^7.4.0",
     "eslint-formatter-beauty": "^3.0.0",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "html-webpack-plugin": "^5.3.1",
     "husky": "^7.0.4",
     "jest": "^27.0.4",

resources/assets/src/scripts/hooks/useBlessingExtra.ts

@@ -5,7 +5,7 @@ export default function useBlessingExtra<T>(key: string, defaultValue?: T): T {
 
   useEffect(() => {
     setValue(blessing.extra[key] as T)
-  }, [])
+  }, [key])
 
   return value
 }

resources/assets/src/scripts/hooks/useMount.ts

@@ -14,7 +14,7 @@ export default function useMount(selector: string): HTMLElement | null {
       mount.removeChild(div)
       container.current = null
     }
-  }, [])
+  }, [selector])
 
   return container.current
 }

yarn.lock

@@ -3687,6 +3687,11 @@ eslint-formatter-beauty@^3.0.0:
     code-excerpt "^2.1.1"
     log-symbols "^2.2.0"
 
+eslint-plugin-react-hooks@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.3.0.tgz#318dbf312e06fab1c835a4abef00121751ac1172"
+  integrity sha512-XslZy0LnMn+84NEG9jSGR6eGqaZB3133L8xewQo3fQagbQuGt7a63gf+P1NGKZavEYEC3UXaWEAA/AqDkuN6xA==
+
 eslint-scope@5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"