fix: stabilize t in app directory

__tests__/useTranslation.test.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { render, cleanup, fireEvent } from '@testing-library/react'
 import I18nProvider from '../src/I18nProvider'
 import useTranslation from '../src/useTranslation'
@@ -1549,5 +1549,33 @@ describe('useTranslation', () => {
  const { container } = render(<Inner />)
  expect(container.textContent).toContain(expected)
  })
+
+ test('`t` is stable', () => {
+ const Inner = ({ effect }) => {
+ const { t } = useTranslation()
+
+ useEffect(() => {
+ const text = t('ns:interpolation', {
+ count: 3,
+ })
+ effect(text)
+ }, [effect, t])
+ }
+
+ globalThis.__NEXT_TRANSLATE__ = {
+ namespaces: {
+ ns: {
+ interpolation: 'There are {{count}} cats.',
+ },
+ },
+ lang: 'en',
+ config: {},
+ }
+
+ const effect = jest.fn()
+ const { rerender } = render(<Inner effect={effect} />)
+ rerender(<Inner effect={effect} />)
+ expect(effect).toBeCalledTimes(1)
+ })
  })
 })

src/useTranslation.tsx

@@ -15,18 +15,26 @@ function useTranslationInPages(defaultNS?: string): I18n {
  )
 }
 
+function isServer() {
+ return typeof window === 'undefined'
+}
+
 function useTranslationAppDir(defaultNS?: string) {
  const { lang, namespaces, config } = globalThis.__NEXT_TRANSLATE__ ?? {}
  const localesToIgnore = config.localesToIgnore || ['default']
  const ignoreLang = localesToIgnore.includes(lang)
- const t = transCore({
- config,
- allNamespaces: namespaces,
- pluralRules: new Intl.PluralRules(ignoreLang ? undefined : lang),
- lang,
- })
+ const getT = () => {
+ const t = transCore({
+ config,
+ allNamespaces: namespaces,
+ pluralRules: new Intl.PluralRules(ignoreLang ? undefined : lang),
+ lang,
+ })
 
- return { t: wrapTWithDefaultNs(t, defaultNS), lang }
+ return wrapTWithDefaultNs(t, defaultNS)
+ }
+ const t = isServer() ? getT() : useMemo(getT, [defaultNS])
+ return { t, lang }
 }
 
 export default function useTranslation(defaultNS?: string): I18n {