fix runaway effect in useTranslation (#1889)

In the useTranslation.js hook, the loadNamespaces function itself is asynchronous (it fetches translations). The mechanism that triggers the state update (and thus the re-render) is the callback provided to loadNamespaces.

  Here is the relevant code block from useTranslation.js:

        // ...
        const [loadCount, setLoadCount] = useState(0); // <--- 1. State hook
        // ...

        useEffect(() => {
          if (i18n && !ready && !useSuspense) {
            const onLoaded = () => setLoadCount((c) => c + 1); // <--- 2. Callback updating state
            if (props.lng) {
              loadLanguages(i18n, props.lng, namespaces, onLoaded);
            } else {
              loadNamespaces(i18n, namespaces, onLoaded); // <--- 3. Trigger
            }
          }
        }, [i18n, props.lng, namespaces, ready, useSuspense, loadCount]); // <--- 4. Dependency array

  The Cycle of Runaway Effect:

   1. Render: useTranslation(['ns1']) is called. A new array ['ns1'] is created.
   2. Memoization (Broken): namespaces is memoized with useMemo, but it depends on ns. Since ns is a new reference, namespaces becomes a new reference.
   3. Effect: The useEffect has namespaces in its dependency array. React sees it changed, so it runs the effect.
   4. Logic: Inside the effect, if !ready (translations not loaded yet), it calls loadNamespaces.
   5. Callback: It passes onLoaded, which calls setLoadCount(c => c + 1).
   6. Update: loadNamespaces might finish immediately (if cached) or later. It calls onLoaded.
   7. Re-render: setLoadCount triggers a re-render of the component.
   8. Loop: Back to Step 1. The component re-renders, creates a new ['ns1'] array, namespaces changes, effect runs again, state updates again... Infinite Loop.

  By stabilizing namespaces, the namespaces reference remains the same across renders even if ns is a new array object. Therefore, useEffect sees no change in dependencies and doesn't run again, breaking the loop.

Author: kalekseev

src/useTranslation.js

@@ -43,10 +43,9 @@ export const useTranslation = (ns, props = {}) => {
 
   const { useSuspense, keyPrefix } = i18nOptions;
 
-  const namespaces = useMemo(() => {
-    const nsOrContext = ns || defaultNSFromContext || i18n?.options?.defaultNS;
-    return isString(nsOrContext) ? [nsOrContext] : nsOrContext || ['translation'];
-  }, [ns, defaultNSFromContext, i18n]);
+  const nsOrContext = ns || defaultNSFromContext || i18n?.options?.defaultNS;
+  const unstableNamespaces = isString(nsOrContext) ? [nsOrContext] : nsOrContext || ['translation'];
+  const namespaces = useMemo(() => unstableNamespaces, unstableNamespaces);
 
   i18n?.reportNamespaces?.addUsedNamespaces?.(namespaces);
 

test/useTranslation.spec.jsx

@@ -309,4 +309,39 @@ describe('useTranslation', () => {
       rerender();
     });
   });
+
+  it('should not trigger loadNamespaces on every render if namespaces array is unstable (inline)', async () => {
+    const i18n = createInstance();
+    i18n.init({
+      lng: 'en',
+      resources: {},
+      react: { useSuspense: false },
+    });
+
+    // Mock hasLoadedNamespace to return false so we hit the loading path
+    i18n.hasLoadedNamespace = () => false;
+
+    // Mock loadNamespaces to do nothing (pending)
+    i18n.loadNamespaces = vitest.fn();
+
+    let renderCount = 0;
+    // Create a hook wrapper that forces re-renders by prop
+    const { rerender } = renderHook(
+      ({ count }) => {
+        renderCount++;
+        // Inline array: New reference every render
+        useTranslation(['ns1'], { i18n });
+      },
+      { initialProps: { count: 0 } },
+    );
+
+    // Initial render
+    expect(i18n.loadNamespaces).toHaveBeenCalledTimes(1);
+
+    rerender({ count: 1 });
+    expect(i18n.loadNamespaces).toHaveBeenCalledTimes(1);
+
+    rerender({ count: 2 });
+    expect(i18n.loadNamespaces).toHaveBeenCalledTimes(1);
+  });
 });