Usage of useTranslation hook inside components cause rerender

Describe the bug

When I use useTranslation hook inside function component it causes multiple rerenders. Can’t reproduce it with create-react-app and react-i18next. So it should be landed here. If I use react profiler I see that it takes 1102 render, but with create-react-app and react-i18next it takes only 2. Am I missing something or this is a bug?

Occurs in next-i18next version

4.2.1

Steps to reproduce

# i18n.js

const NextI18Next = require('next-i18next').default

module.exports = new NextI18Next({
    defaultLanguage: 'fi',
    otherLanguages: ['en', 'ru'],
    localeSubpaths: {
        en: 'en',
        ru: 'ru',
    },
})

# _app.js

import React from 'react';
import './App.css';
import Test from './components/test';
import i18n from './i18n';

const Locales = () => (
  <>
    {['fi', 'en', 'ru'].map(locale => (
      <button type="button" key={locale} onClick={() => { i18n.changeLanguage(locale); }}>
        {locale}
      </button>
    ))}
  </>
);

function App() {
  let tests = [];

  for (let index = 0; index < 100; index++) {
    let testsinner = [];
    for (let index2 = 0; index2 < 10; index2++) {
      testsinner.push(<Test key={`${index}_${index2}`} />);
    }
    tests.push(<Test key={index}>{testsinner}</Test>);
  }

  return (
    <>
      <Locales />
      <div>
        {tests}
      </div>
    </>
  );

}

export default App;

# components/test.jsx

import i18n from '../i18n';

let count = 0;

const Test = ({ children }) => {
    count++;

    const [t, { language }] = i18n.useTranslation();

    return (
        <>
            <p>{t('catalog')} + {count} + {language}</p>
            <div>{children}</div>
        </>
    )
}

export default Test;

Expected behaviour

Shouldn’t be rendered so much times

OS (please complete the following information)

• OS: macOS Catalina
• Browser: Chrome 80.0.3987.132

[k4mr4n]

I have the same issue and whydidyourender library point it out very well. it seems like the “t” function exported from “useTranslation” hook has not been memoized.

[tquiroga]

Same issue pointed by whydidyourender, when you use the hook across your app and realize most re-render are caused by the useTranslation hook, ouch 😬