fix: recompute LL after calling setLocale (#722)

Co-authored-by: Hofer Ivan <ivan.hofer@outlook.com>

Author: scaltunsoy

.size-limit.js

@@ -38,7 +38,7 @@ module.exports = [
 	{
 		name: 'adapter-react',
 		path: 'react/index.min.mjs',
-		limit: '1562 b',
+		limit: '1602 b',
 		ignore: ['react'],
 	},
 	{

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 # Version 5
 
+## 5.26.1 (2023-08-14)
+
+Fix:
+ - recompute `LL` object after calling `setLocale` in adapter-react [#721](https://github.com/ivanhofer/typesafe-i18n/issues/721)
+
 ## 5.26.0 (2023-08-01)
 
 Feat:

README.md

@@ -241,7 +241,7 @@ Apart from that there can be a small overhead depending on which utilities and w
 
 There also exists a useful wrapper for some frameworks:
 - [`typesafe-i18n` angular-service](https://github.com/ivanhofer/typesafe-i18n/tree/main/packages/adapter-angular): 1230 bytes gzipped
-- [`typesafe-i18n` react-context](https://github.com/ivanhofer/typesafe-i18n/tree/main/packages/adapter-react): 1562 bytes gzipped
+- [`typesafe-i18n` react-context](https://github.com/ivanhofer/typesafe-i18n/tree/main/packages/adapter-react): 1602 bytes gzipped
 - [`typesafe-i18n` solid-context](https://github.com/ivanhofer/typesafe-i18n/tree/main/packages/adapter-solid): 1403 bytes gzipped
 - [`typesafe-i18n` svelte-store](https://github.com/ivanhofer/typesafe-i18n/tree/main/packages/adapter-svelte): 1342 bytes gzipped
 - [`typesafe-i18n` vue-plugin](https://github.com/ivanhofer/typesafe-i18n/tree/main/packages/adapter-vue): 1256 bytes gzipped

packages/adapter-react/src/index.tsx

@@ -50,17 +50,23 @@ export const initI18nReact = <
 	const context = React.createContext({} as I18nContextType<L, T, TF>)
 
 	const component: React.FunctionComponent<TypesafeI18nProps<L>> = (props) => {
-		const [locale, setLocale] = React.useState<L>(props.locale)
+		const [locale, _setLocale] = React.useState<L>(props.locale)
+		const [LL, setLL] = React.useState<TF>(() =>
+			!locale ? getFallbackProxy<TF>() : i18nObject<L, T, TF, F>(locale, translations[locale], formatters[locale]),
+		)
+
+		const setLocale = React.useCallback((newLocale: L) => {
+			_setLocale(newLocale)
+			setLL(() => i18nObject<L, T, TF, F>(newLocale, translations[newLocale], formatters[newLocale]))
+		}, [])
 
 		const ctx = React.useMemo<I18nContextType<L, T, TF>>(
 			() => ({
 				setLocale,
 				locale,
-				LL: !locale
-					? getFallbackProxy<TF>()
-					: i18nObject<L, T, TF, F>(locale, translations[locale], formatters[locale]),
+				LL,
 			}),
-			[setLocale, locale, translations, formatters],
+			[setLocale, locale, LL],
 		)
 
 		return <context.Provider value={ctx}>{props.children}</context.Provider>