fix: avoid recomputing react context (#684) (#685)

Author: vchirikov

.size-limit.js

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

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 # Version 5
 
+## 5.24.4 (2023-07-10)
+
+Fix:
+ - avoid recomputing react context [#684](https://github.com/ivanhofer/typesafe-i18n/issues/684)
+ 
 ## 5.24.3 (2023-03-26)
 
 Fix:

CONTRIBUTING.md

@@ -4,7 +4,7 @@ Contributions are welcome. New ideas, improvements and optimizations are collect
 
 This project should keep following values:
 
- - lightweight and performat i18n solution
+ - lightweight and performant i18n solution
  - best possible TypeScript support
  - easy to use (DX)
  - should work well together with other tools and services

packages/adapter-react/src/index.tsx

@@ -50,17 +50,18 @@ 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>(null as unknown as L)
-		const [LL, setLL] = React.useState<TF>(getFallbackProxy<TF>())
+		const [locale, setLocale] = React.useState<L>(props.locale)
 
-		const setLocale = (newLocale: L): void => {
-			_setLocale(newLocale)
-			setLL(() => i18nObject<L, T, TF, F>(newLocale, translations[newLocale], formatters[newLocale]))
-		}
-
-		!locale && setLocale(props.locale)
-
-		const ctx = { setLocale, locale, LL } as I18nContextType<L, T, TF>
+		const ctx = React.useMemo<I18nContextType<L, T, TF>>(
+			() => ({
+				setLocale,
+				locale,
+				LL: !locale
+					? getFallbackProxy<TF>()
+					: i18nObject<L, T, TF, F>(locale, translations[locale], formatters[locale]),
+			}),
+			[setLocale, locale, translations, formatters],
+		)
 
 		return <context.Provider value={ctx}>{props.children}</context.Provider>
 	}

packages/adapter-solid/src/index.mts

@@ -1,4 +1,13 @@
-import { batch, createComponent, createContext, createSignal, useContext, type Accessor, type Component, type JSX } from 'solid-js'
+import {
+	batch,
+	createComponent,
+	createContext,
+	createSignal,
+	useContext,
+	type Accessor,
+	type Component,
+	type JSX,
+} from 'solid-js'
 import { getFallbackProxy } from '../../runtime/src/core-utils.mjs'
 import type { BaseFormatters, BaseTranslation, Locale, TranslationFunctions } from '../../runtime/src/core.mjs'
 import { i18nObject } from '../../runtime/src/util.object.mjs'

packages/runtime/src/index.mts

@@ -1,5 +1,10 @@
-export { type BaseTranslation, type FormattersInitializer, type LocaleTranslations, type LocalizedString, type RequiredParams } from './core.mjs'
+export {
+	type BaseTranslation,
+	type FormattersInitializer,
+	type LocaleTranslations,
+	type LocalizedString,
+	type RequiredParams,
+} from './core.mjs'
 export { i18n, type LocaleTranslationFunctions } from './util.instance.mjs'
 export { i18nObject, typesafeI18nObject } from './util.object.mjs'
 export { i18nString, typesafeI18nString, type TranslateByString } from './util.string.mjs'
-