🚑 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.
This commit is contained in:
Yuichi Oneda 2024-05-28 11:07:08 -07:00 committed by GitHub
parent 5dc5d875ba
commit 0ee060d730
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 12 additions and 1 deletions

View file

@ -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;
}