🚑 fix: Prevent Infinite Re-Rendering of the Password Reset UI (#2887)

* 🔧 fix: prevent unnecessary re-rendering of components using useLocalize hook

The useLocalize hook now uses useCallback to create a memoized version of the localize function. This will prevent unnecessary recalculations when the language value changes.

* 🚑 fix: not reset the bodyText if it has a value set.

client/src/components/Auth/RequestPasswordReset.tsx

@@ -36,6 +36,9 @@ function RequestPasswordReset() {
   };
 
   useEffect(() => {
+    if (bodyText) {
+      return;
+    }
     if (!requestPasswordReset.isSuccess) {
       setHeaderText('com_auth_reset_password');
       setBodyText(undefined);
@@ -64,6 +67,7 @@ function RequestPasswordReset() {
     resetLink,
     localize,
     setHeaderText,
+    bodyText,
   ]);
 
   if (bodyText) {

client/src/hooks/useLocalize.ts

@@ -1,8 +1,15 @@
+import { useCallback } from 'react';
 import { useRecoilValue } from 'recoil';
 import { localize } from '~/localization/Translation';
 import store from '~/store';
 
 export default function useLocalize() {
   const lang = useRecoilValue(store.lang);
-  return (phraseKey: string, ...values: string[]) => localize(lang, phraseKey, ...(values ?? []));
+
+  const memoizedLocalize = useCallback(
+    (phraseKey: string, ...values: string[]) => localize(lang, phraseKey, ...(values ?? [])),
+    [lang], // Only recreate the function when `lang` changes
+  );
+
+  return memoizedLocalize;
 }