Parent react components stay unchanged when using I18n.changeLanguage(lng)

Describe the bug It in some way similar to #611 May be a bug, but may be i’m doing something wrong.

Occurs in react-i18next version 10.11.4

To Reproduce I create language switcher component. Use it in root component. In all other components I use Trans and useTranslation. After language switch only swticher component is updated. But, if I use changeLanguage directly in root component, app will be rerendered as expected. Should I use I18nextProvider or something?

import React, {useCallback} from 'react';
import {useTranslation} from 'react-i18next';

const LanguageSwitcher = ({className}) => {
  const {i18n} = useTranslation();

  const setEnglish = useCallback(() => {
    i18n.changeLanguage('en');
  }, [i18n]);

  const setRussian = useCallback(() => {
    i18n.changeLanguage('ru');
  }, [i18n]);

  return (
    <div className={className}>
      <button
        onClick={setEnglish}
      >
        English
      </button>
      <button
        onClick={setRussian}
      >
        Русский
      </button>
    </div>
  );
};

export default LanguageSwitcher;

Expected behaviour All components, that use useTranslation should recive new t and/or i18n and rerender when language switched.

OS (please complete the following information):

• Device: Ubuntu 18.04
• Browser: Yandex.Browser 19.4.2.698 beta (64-bit)

[jamuhl]

downside -> when using multiple namespaces t can be bound to a namespace

it gets a t function -> it just does not get any update on languageChanged…that’s “all” (beside having a t function bound to global configured defaultNamespace)

[jamuhl]

The Trans component does not get a magical rerender on languageChange -> only hook, HOC get that, so correct would be passing t to the Trans component (Trans component does only enable translation of JSX nodes - nothing more):

import React from 'react';
import { Trans, useTranslation } from 'react-i18next';

const Content: React.FC = () => {
  const {t} = useTranslation();
  return (
    <div>
      <Trans
        t={t}
        i18nKey={`content`}
        defaults='My content'
      />
    </div>
  );
};

export default Content;