fix regression in v16.2.0: bindI18nStore #1879

Author: adrai

CHANGELOG.md

@@ -1,3 +1,7 @@
+### 16.2.1
+
+- fix regression in v16.2.0: bindI18nStore does not work correctly [1879](https://github.com/i18next/react-i18next/issues/1879)
+
 ### 16.2.0
 
 - try to address: useTranslation hook violates React's rules of hooks by conditionally calling inner hooks [1863](https://github.com/i18next/react-i18next/issues/1863)

react-i18next.js

@@ -3398,17 +3398,22 @@
       return isString(nsOrContext) ? [nsOrContext] : nsOrContext || ['translation'];
     }, [ns, defaultNSFromContext, i18n]);
     i18n?.reportNamespaces?.addUsedNamespaces?.(namespaces);
+    const revisionRef = React.useRef(0);
     const subscribe = React.useCallback(callback => {
       if (!i18n) return dummySubscribe;
       const {
         bindI18n,
         bindI18nStore
       } = i18nOptions;
-      if (bindI18n) i18n.on(bindI18n, callback);
-      if (bindI18nStore) i18n.store.on(bindI18nStore, callback);
+      const wrappedCallback = () => {
+        revisionRef.current += 1;
+        callback();
+      };
+      if (bindI18n) i18n.on(bindI18n, wrappedCallback);
+      if (bindI18nStore) i18n.store.on(bindI18nStore, wrappedCallback);
       return () => {
-        if (bindI18n) bindI18n.split(' ').forEach(e => i18n.off(e, callback));
-        if (bindI18nStore) bindI18nStore.split(' ').forEach(e => i18n.store.off(e, callback));
+        if (bindI18n) bindI18n.split(' ').forEach(e => i18n.off(e, wrappedCallback));
+        if (bindI18nStore) bindI18nStore.split(' ').forEach(e => i18n.store.off(e, wrappedCallback));
       };
     }, [i18n, i18nOptions]);
     const snapshotRef = React.useRef();
@@ -3417,16 +3422,19 @@
         return notReadySnapshot;
       }
       const calculatedReady = !!(i18n.isInitialized || i18n.initializedStoreOnce) && namespaces.every(n => hasLoadedNamespace(n, i18n, i18nOptions));
-      const calculatedT = i18n.getFixedT(props.lng || i18n.language, i18nOptions.nsMode === 'fallback' ? namespaces : namespaces[0], keyPrefix);
+      const currentLng = props.lng || i18n.language;
+      const currentRevision = revisionRef.current;
       const lastSnapshot = snapshotRef.current;
-      if (lastSnapshot && lastSnapshot.ready === calculatedReady && lastSnapshot.lng === (props.lng || i18n.language) && lastSnapshot.keyPrefix === keyPrefix) {
+      if (lastSnapshot && lastSnapshot.ready === calculatedReady && lastSnapshot.lng === currentLng && lastSnapshot.keyPrefix === keyPrefix && lastSnapshot.revision === currentRevision) {
         return lastSnapshot;
       }
+      const calculatedT = i18n.getFixedT(currentLng, i18nOptions.nsMode === 'fallback' ? namespaces : namespaces[0], keyPrefix);
       const newSnapshot = {
         t: calculatedT,
         ready: calculatedReady,
-        lng: props.lng || i18n.language,
-        keyPrefix
+        lng: currentLng,
+        keyPrefix,
+        revision: currentRevision
       };
       snapshotRef.current = newSnapshot;
       return newSnapshot;

react-i18next.min.js

@@ -50,15 +50,23 @@ export const useTranslation = (ns, props = {}) => {
 
   i18n?.reportNamespaces?.addUsedNamespaces?.(namespaces);
 
+  const revisionRef = useRef(0);
   const subscribe = useCallback(
     (callback) => {
       if (!i18n) return dummySubscribe;
       const { bindI18n, bindI18nStore } = i18nOptions;
-      if (bindI18n) i18n.on(bindI18n, callback);
-      if (bindI18nStore) i18n.store.on(bindI18nStore, callback);
+
+      const wrappedCallback = () => {
+        revisionRef.current += 1;
+        callback();
+      };
+
+      if (bindI18n) i18n.on(bindI18n, wrappedCallback);
+      if (bindI18nStore) i18n.store.on(bindI18nStore, wrappedCallback);
       return () => {
-        if (bindI18n) bindI18n.split(' ').forEach((e) => i18n.off(e, callback));
-        if (bindI18nStore) bindI18nStore.split(' ').forEach((e) => i18n.store.off(e, callback));
+        if (bindI18n) bindI18n.split(' ').forEach((e) => i18n.off(e, wrappedCallback));
+        if (bindI18nStore)
+          bindI18nStore.split(' ').forEach((e) => i18n.store.off(e, wrappedCallback));
       };
     },
     [i18n, i18nOptions],
@@ -72,25 +80,32 @@ export const useTranslation = (ns, props = {}) => {
     const calculatedReady =
       !!(i18n.isInitialized || i18n.initializedStoreOnce) &&
       namespaces.every((n) => hasLoadedNamespace(n, i18n, i18nOptions));
-    const calculatedT = i18n.getFixedT(
-      props.lng || i18n.language,
-      i18nOptions.nsMode === 'fallback' ? namespaces : namespaces[0],
-      keyPrefix,
-    );
+    const currentLng = props.lng || i18n.language;
+    const currentRevision = revisionRef.current;
+
     const lastSnapshot = snapshotRef.current;
     if (
       lastSnapshot &&
       lastSnapshot.ready === calculatedReady &&
-      lastSnapshot.lng === (props.lng || i18n.language) &&
-      lastSnapshot.keyPrefix === keyPrefix
+      lastSnapshot.lng === currentLng &&
+      lastSnapshot.keyPrefix === keyPrefix &&
+      lastSnapshot.revision === currentRevision // Check revision
     ) {
       return lastSnapshot;
     }
+
+    const calculatedT = i18n.getFixedT(
+      currentLng,
+      i18nOptions.nsMode === 'fallback' ? namespaces : namespaces[0],
+      keyPrefix,
+    );
+
     const newSnapshot = {
       t: calculatedT,
       ready: calculatedReady,
-      lng: props.lng || i18n.language,
+      lng: currentLng,
       keyPrefix,
+      revision: currentRevision, // Store revision
     };
     snapshotRef.current = newSnapshot;
     return newSnapshot;

src/useTranslation.js

@@ -0,0 +1,31 @@
+import { describe, it, expect } from 'vitest';
+import React from 'react';
+import { act, render, screen } from '@testing-library/react';
+import { createInstance } from 'i18next';
+import { useTranslation } from '../src/useTranslation';
+import { I18nextProvider } from '../src/I18nextProvider';
+
+describe('useTranslation with bindI18nStore', () => {
+  it('should correctly return the correct translation', async () => {
+    const i18next = createInstance();
+    await i18next.init({
+      fallbackLng: ['en'],
+      react: { bindI18nStore: 'added' },
+    });
+    function TranslateAKey() {
+      const { t } = useTranslation();
+      return <h1>{t('key', { ns: 'namespace' })}</h1>;
+    }
+    i18next.addResourceBundle('en', 'namespace', { key: 'english' }, false, true);
+    render(
+      <I18nextProvider i18n={i18next}>
+        <TranslateAKey />
+      </I18nextProvider>,
+    );
+    expect(screen.getByRole('heading')).toHaveTextContent('english');
+    await act(() => i18next.changeLanguage('de'));
+    expect(screen.getByRole('heading')).toHaveTextContent('english');
+    await act(() => i18next.addResourceBundle('de', 'namespace', { key: 'deutsch' }, false, true));
+    expect(screen.getByRole('heading')).toHaveTextContent('deutsch'); // this assertion fails
+  });
+});