useTranslation is the cause of the rerender component

[developer82]

🐛 Bug Report

When using the useTranslation hook the component is re-rendered even if the translation is not used and when there is no change to the language.
I have found a similar reported issue here: #1291 but it was closed with the explanation that there is not issue.
To rule out a situation that it is something in my app that I'm missing, I've created a new react app without anything in it and reproduced the issue.

To Reproduce

1. Create a new react app using npx create-react-app my-app
2. Add the translation as described here: https://react.i18next.com/latest/using-with-hooks
3. Add a console.log("App component loading"); in App component inside the App function.
4. Once const { t, i18n } = useTranslation(); is added "App component loading" is printed twice in the console. When removed it is ok.

import logo from './logo.svg';
import './App.css';
import { useTranslation } from 'react-i18next';

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

  console.log("App component loading");

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Expected behavior

Component should not re-render by the useTranslation hook.

Your Environment

• runtime version: node v18.12.1
• i18next version: 22.4.15
• os: Windows
• i18next-browser-languagedetector: 7.0.1
• react-i18next: 12.2.2

[adrai]

using an i18next backend like i18next-http-backend will for sure rerender, because the i18next init call is asynchronous and also loading the specific namespace is asynchronous.
If you log the ready flag const { t, i18n, ready } = useTranslation(); you'll see that the translations are probably not ready. => https://react.i18next.com/latest/usetranslation-hook#not-using-suspense

[developer82]

Thanks. I'm not using i18next-http-backend. And no translation resources are set.

This is the i18n.js file referenced in indexjs:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import LanguageDetector from 'i18next-browser-languagedetector';
// don't want to use this?
// have a look at the Quick start guide 
// for passing in lng and translations on init

i18n
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // pass the i18n instance to react-i18next.
  .use(initReactI18next)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
  .init({
    fallbackLng: 'en',
    debug: true,

    interpolation: {
      escapeValue: false, // not needed for react as it escapes by default
    }
  });


export default i18n;

I've also tried commenting out the LanguageDetector.

EDIT
When loggin ready flag it's always true

[adrai]

How does your index file look like? Are you using the <React.StrictMode> ? #1599 (comment)

[developer82]

Yes, using <React.StrictMode> (it comes default with a new project and from my understanding it's a good practice to use it - should I not?)

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import './i18n';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

[adrai]

Then it's normal... like said here: it only happens during development: #1599 (comment)

I have no idea how to prevent that.

[developer82]

I see. You are right. Tested with a built app and it doesn't happen.
Since this is using in my App component and I have some logic there with routing involved this is a bit of a development challenge for me... Thanks.