Description
🐛 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.