From 0ee060d73015dee8d61c6e17400f78d9d1d8cff0 Mon Sep 17 00:00:00 2001
From: Yuichi Oneda <ohneda@gmail.com>
Date: Tue, 28 May 2024 11:07:08 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=91=20=20fix:=20Prevent=20Infinite=20R?=
 =?UTF-8?q?e-Rendering=20of=20the=20Password=20Reset=20UI=20(#2887)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🔧 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 | 4 ++++
 client/src/hooks/useLocalize.ts                     | 9 ++++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Auth/RequestPasswordReset.tsx b/client/src/components/Auth/RequestPasswordReset.tsx
index 770a4bd523..9df69433a6 100644
--- a/client/src/components/Auth/RequestPasswordReset.tsx
+++ b/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) {
diff --git a/client/src/hooks/useLocalize.ts b/client/src/hooks/useLocalize.ts
index a959b72ca2..277102cfa0 100644
--- a/client/src/hooks/useLocalize.ts
+++ b/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;
 }