fix(next-international): nested objects locales with fallbackLocale (#73

)
QuiiBz · Jul 20, 2023 · b71ad6c · b71ad6c
1 parent 3c494b1
commit b71ad6c
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 22 deletions.
diff --git a/packages/next-international/src/app/client/create-i18n-provider-client.tsx b/packages/next-international/src/app/client/create-i18n-provider-client.tsx
@@ -1,4 +1,4 @@
-import React, { Context, ReactElement, ReactNode, useCallback, useEffect, useState } from 'react';
+import React, { Context, ReactElement, ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
 import type { LocaleContext } from '../../types';
 import type { BaseLocale, ImportedLocales } from 'international-types';
 import { flattenLocale } from '../../common/flatten-locale';
@@ -32,19 +32,18 @@ export function createI18nProviderClient<Locale extends BaseLocale>(
       loadLocale(baseLocale);
     }, [baseLocale, loadLocale]);
 
+    const value = useMemo(
+      () => ({
+        localeContent: (clientLocale || baseLocale) as Locale,
+        fallbackLocale: fallbackLocale ? flattenLocale(fallbackLocale) : undefined,
+      }),
+      [clientLocale, baseLocale, fallbackLocale],
+    );
+
     if (!clientLocale && fallback) {
       return fallback;
     }
 
-    return (
-      <I18nClientContext.Provider
-        value={{
-          localeContent: (clientLocale || baseLocale) as Locale,
-          fallbackLocale,
-        }}
-      >
-        {children}
-      </I18nClientContext.Provider>
-    );
+    return <I18nClientContext.Provider value={value}>{children}</I18nClientContext.Provider>;
   };
 }
diff --git a/packages/next-international/src/pages/create-i18n-provider.tsx b/packages/next-international/src/pages/create-i18n-provider.tsx
@@ -1,4 +1,4 @@
-import React, { Context, ReactElement, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+import React, { Context, ReactElement, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { LocaleContext } from '../types';
 import type { BaseLocale, ImportedLocales } from 'international-types';
 import { useRouter } from 'next/router';
@@ -65,6 +65,14 @@ export function createI18nProvider<Locale extends BaseLocale>(
       initialLoadRef.current = false;
     }, [baseLocale, loadLocale, locale]);
 
+    const value = useMemo(
+      () => ({
+        localeContent: (clientLocale || baseLocale) as Locale,
+        fallbackLocale: fallbackLocale ? flattenLocale(fallbackLocale) : undefined,
+      }),
+      [clientLocale, baseLocale, fallbackLocale],
+    );
+
     if (!locale || !defaultLocale) {
       return error(`'i18n.defaultLocale' not defined in 'next.config.js'`);
     }
@@ -77,15 +85,6 @@ export function createI18nProvider<Locale extends BaseLocale>(
       return fallback;
     }
 
-    return (
-      <I18nContext.Provider
-        value={{
-          localeContent: (clientLocale || baseLocale) as Locale,
-          fallbackLocale,
-        }}
-      >
-        {children}
-      </I18nContext.Provider>
-    );
+    return <I18nContext.Provider value={value}>{children}</I18nContext.Provider>;
   };
 }