useTranslation is the cause of the rerender component

[zcmgyu]

🐛 Bug Report

I got rerendering issue while use const { t } = useTranslation() of react-i18next.
In my research, the inside of useTranslation hook used useState to store a getT function. Wrapping getT function inside useCallback hook could not prevent getting this message from WDYR

different functions with the same name

function getT() {
    return i18n.getFixedT(null, i18nOptions.nsMode === 'fallback' ? namespaces : namespaces[0]);
}

https://github.com/i18next/react-i18next/blob/master/src/useTranslation.js#L42-L45

setT(getT);

https://github.com/i18next/react-i18next/blob/master/src/useTranslation.js#L82

Could you please give me the idea to prevent a re-rendering issue every time use t of useTranslation? Thanks 🙇🏻

To Reproduce

Repo: https://github.com/zcmgyu/react-i18next-rerender-issue

Expected behavior

Could useTranslation feature without re-render because of the same name of fixedT

Your Environment

• runtime version: Node v15.8.0, browser Chrome
• i18next version: ^20.1.0
• react-i18next: ^11.8.12
• os: MacOS Big Sur

[zcmgyu]

Same issue with next-i18next

i18next/next-i18next#654

[jamuhl]

check the code of useTranslation -> it sets that function initially and on languageChange (and optionally by userland code binded events) -> so that function only changes if something is "bad" in userland code - not by design

[zcmgyu]

@jamuhl Thanks for your reply.

I've already checked it with the non-Gatsby project. The useTranslation hook will not cause any re-render issue. I will try to figure out gatsby-plugin-react-i18next. Really thanks. 🙇

https://codesandbox.io/s/why-did-you-render-sandbox-forked-891xf?file=/src/index.js

[yash14022001]

I am not sure if the issue is still there or not, but I encountered some bug from my side when I was having the issue of re-rendering.

I was listening to lang in my application through redux and i18n was extracted from useTranslation() hook. The line if (i18n.language === lang) return; was not there when I was having the issue of re-rendering.

But when I added that line, basically avoiding i18n.setLanguage() call when language was the same as previous, my re-rendering issue was solved and the t hook was working perfectly afterwards.

I am curious why the setLanguage() does not apply the same validation check to avoid the duplicate language set, thus avoiding other re-rendering caused by t hook change.

Btw I am using v11.18.3 of the package and using react 17. I am new to react18n's codebase so not know anything about it. So pardon if this is the wrong interpretation of things :)

[jamuhl]

@yash14022001 because we do not expect devs to call changeLanguage over and over again setting the same language...