Different functions with the same name

Description:

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 confirm that issue comes from react-i18next? Thanks 🙇🏻

Reproduction:

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

[vzaidman]

There’s a workaround for CRA-4 here: https://github.com/welldone-software/why-did-you-render/issues/154

[zcmgyu]

@vzaidman I’ve already checked it with the non-Gatsby project. The useTranslation hook will not cause any re-render issue while initial. If I intentionally cause the BigListPureComponent to be re-rendered then I will get the same rerender warning message as above.

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