t function from useTranslation is unstable in concurrent mode

[woodreamz]

🐛 Bug Report

The bug is really well explained in #1599. This issue has been also reported in #1636. Those issues have been closed without being fixed.

When enabling concurrent mode in React, the t function changes and creates extra renders. i18n.t is not doing that. For now, it's not major as concurrent mode is not enabled in production build but could become major in a futur react release.

The issue seems to be in useTranslation. I am trying to find a fix and propose a PR. This issue will help to track the work.

For now, concurrent mode is enabled with StrictMode.

You can use to help surface concurrency-related bugs during development. Strict Mode doesn’t affect production behavior, but during development it will log extra warnings and double-invoke functions that are expected to be idempotent.
Source: react.dev

To Reproduce

In this codesandbox, you can se in the console that the useEffect on i18n is called 2 times and the useEffect on t is called 3 times.

import "./i18next";
import { useTranslation } from "react-i18next";
import { useEffect } from "react";

export default function App() {
  const { i18n, t } = useTranslation();

  useEffect(() => {
    console.log("useEffect with i18n");
  }, [i18n]);

  useEffect(() => {
    console.log("useEffect with t");
  }, [t]);

  return i18n.t("text");
}

Expected behavior

useEffect with t as dependency should be called 2 times.

[woodreamz]

It seems to be caused by:

react-i18next/src/useTranslation.js

Line 117 in 4619862

setT(getT);

[qq831799]

Same issue here, and my react-i18next version is 12.3.1

[timheilman]

same issue here. Thank you @woodreamz for your sleuthing so far.

[adrai]

It seems to be caused by:

react-i18next/src/useTranslation.js

Line 117 in 4619862

setT(getT);

was introduced here by @medihack because of this

[timheilman]

I have a draft PR to fix this at #1716 ; still working through the contribution checklist.
I'm not sure hook-based testing including strictMode is yet available; I've found this, which was just merged:

testing-library/react-testing-library#1241

but I haven't looked into hook-testing support using it, yet

[adrai]

Should be fixed with v14.0.2

[timheilman]

Thank you @woodreamz for generating a minimal reproduction of the bug and @adrai for maintaining this repo and providing me the opportunity to contribute :)

[adrai]

reverted with v14.0.3 and waiting for a better fix... because of this

[timheilman]

Sorry for the false start! I hope #1720 will be better forward progress.

[adrai]

should be addressed with v14.0.5

[wr-lhiggitt]

This is still occurring for me in 14.0.5

[timheilman]

I'm afraid I can reliably reproduce using the minimal reproduction from the original post in 14.0.3, and I cannot reproduce using 14.0.5 . I'm still interested in the bug; are you able to see the bug using the reproduction in the original post? If not, can you provide a different minimal reproduction with expected result vs actual result?

[MarlonVCendron]

I don't know if that's related or not. But having t as a dependency on useMemo makes it render indefinetely, but as a dependency on useEffect it works normally. This only happens in a specific component, I wasn't able to create a minimal reproduction of the bug, so maybe it's just something I'm doing wrong, but can't figure it out.

const tools = useMemo(() => {
    console.log('useMemo')
    return []
  }, [t])

  useEffect(() => {
    console.log('useEffect')
  }, [t])