fix: Render correct messages when the namespace changes in `useTransl…

…ations` (#58) * include namespace in cacheKey * add a test for cacheing by namespace * Improve naming for test The caching should be a implementation detail here Co-authored-by: Jan Amann <[email protected]> * Handle undefined namespace or key in cacheKey * fix linter issues with useTranslation hook after adding namespace to cache key Co-authored-by: Jan Amann <[email protected]>
amannn · Sep 17, 2021 · b8f7dab · b8f7dab
1 parent 08af70d
commit b8f7dab
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 3 deletions.
diff --git a/packages/use-intl/src/useTranslations.tsx b/packages/use-intl/src/useTranslations.tsx
@@ -154,9 +154,13 @@ export default function useTranslations(namespace?: string) {
       }
       const messages = messagesOrError;
 
+      const cacheKey = [namespace, key]
+        .filter((part) => part != null)
+        .join('.');
+
       let messageFormat;
-      if (cachedFormatsByLocale[locale]?.[key]) {
-        messageFormat = cachedFormatsByLocale[locale][key];
+      if (cachedFormatsByLocale[locale]?.[cacheKey]) {
+        messageFormat = cachedFormatsByLocale[locale][cacheKey];
       } else {
         let message;
         try {
@@ -201,7 +205,7 @@ export default function useTranslations(namespace?: string) {
         if (!cachedFormatsByLocale[locale]) {
           cachedFormatsByLocale[locale] = {};
         }
-        cachedFormatsByLocale[locale][key] = messageFormat;
+        cachedFormatsByLocale[locale][cacheKey] = messageFormat;
       }
 
       try {

diff --git a/packages/use-intl/test/useTranslations.test.tsx b/packages/use-intl/test/useTranslations.test.tsx
@@ -234,6 +234,35 @@ it('has a stable reference', () => {
   screen.getByText('2');
 });
 
+it('renders the correct message when the namespace changes', () => {
+  function Component({namespace}: {namespace: string}): JSX.Element {
+    const t = useTranslations(namespace);
+
+    return <span>{t('title')}</span>;
+  }
+
+  const messages = {
+    namespaceA: {title: 'This is namespace A'},
+    namespaceB: {title: 'This is namespace B'}
+  };
+
+  const {rerender} = render(
+    <IntlProvider locale="en" messages={messages}>
+      <Component namespace="namespaceA" />
+    </IntlProvider>
+  );
+
+  screen.getByText('This is namespace A');
+
+  rerender(
+    <IntlProvider locale="en" messages={messages}>
+      <Component namespace="namespaceB" />
+    </IntlProvider>
+  );
+
+  screen.getByText('This is namespace B');
+});
+
 describe('t.rich', () => {
   function renderRichTextMessage(
     message: string,