useFormValidationSlice: update when params have changed

README.md

@@ -25,8 +25,6 @@
 -   Out of the box [frontend form validation](#user-profile-and-frontend-form-validation) 🥳
 -   Improvements (and breaking changes in `import { useKcMessage } from "keycloakify"`.
 
-**NOTICE**: [`powerhooks`](https://www.npmjs.com/package/powerhooks) have to be updated ([it's a peerDependency since v3](#v3))
-
 # Motivations
 
 Keycloak provides [theme support](https://www.keycloak.org/docs/latest/server_development/#_themes) for web pages. This allows customizing the look and feel of end-user facing pages so they can be integrated with your applications.

package.json

@@ -56,7 +56,7 @@
     "homepage": "https://github.com/garronej/keycloakify",
     "peerDependencies": {
         "@emotion/react": "^11.4.1",
-        "powerhooks": "^0.11.0",
+        "powerhooks": "^0.10.0",
         "react": "^16.8.0 || ^17.0.0",
         "tss-react": "^1.1.0"
     },

src/lib/useFormValidationSlice.tsx

@@ -5,7 +5,6 @@ import { useKcMessage } from "./i18n/useKcMessage";
 import { useConstCallback } from "powerhooks/useConstCallback";
 import { id } from "tsafe/id";
 import type { MessageKey } from "./i18n/useKcMessage";
-import { useConst } from "powerhooks/useConst";
 import { emailRegexp } from "./tools/emailRegExp";
 
 export type KcContextLike = {
@@ -278,6 +277,7 @@ export function useFormValidationSlice(params: {
         passwordRequired: boolean;
         realm: { registrationEmailAsUsername: boolean };
     };
+    /** NOTE: Try to avoid passing a new ref every render for better performances. */
     passwordValidators?: Validators;
 }) {
     const {
@@ -290,7 +290,8 @@ export function useFormValidationSlice(params: {
         },
     } = params;
 
-    const attributesWithPassword = useConst(() =>
+    const attributesWithPassword = useMemo(
+        () =>
             !kcContext.passwordRequired
                 ? kcContext.profile.attributes
                 : (() => {
@@ -333,6 +334,7 @@ export function useFormValidationSlice(params: {
                           [],
                       );
                   })(),
+        [kcContext, passwordValidators],
     );
 
     const { getErrors } = useGetErrors({
@@ -344,7 +346,8 @@ export function useFormValidationSlice(params: {
         },
     });
 
-    const initialInternalState = useConst(() =>
+    const initialInternalState = useMemo(
+        () =>
             Object.fromEntries(
                 attributesWithPassword
                     .map(attribute => ({
@@ -365,6 +368,7 @@ export function useFormValidationSlice(params: {
                         },
                     ]),
             ),
+        [attributesWithPassword],
     );
 
     type InternalState = typeof initialInternalState;
@@ -421,7 +425,7 @@ export function useFormValidationSlice(params: {
                     errors.length === 0 && (value !== "" || !attributesWithPassword.find(attribute => attribute.name === name)!.required),
             ),
         }),
-        [formValidationInternalState],
+        [formValidationInternalState, attributesWithPassword],
     );
 
     return { formValidationState, formValidationReducer, attributesWithPassword };