t in attribute not updating when activating language change

Describe the bug t in attribute not updating when activating language change

To Reproduce Steps to reproduce the behavior, possibly with minimal code sample, e.g: translate.zip

import logo from "./logo.svg";
import "./App.css";

import { ThemeProvider } from "styled-components";
import {
  themeBaseLight,
  ButtonSmall,
  ButtonLink,
} from "@cmctechnology/phoenix-stockbroking-web-design";
import { i18n } from "@lingui/core";
import { I18nProvider } from "@lingui/react";
import { messages as en } from "./locales/en/messages.js";
import { messages as pt } from "./locales/pt/messages.js";
import { Trans, t } from "@lingui/macro";

i18n.load("en", en);
i18n.load("pt", pt);
i18n.activate("en");

function App() {
  return (
    <I18nProvider i18n={i18n}>
      <a href="#" onClick={() => i18n.activate("en")}>
        en
      </a>
      |
      <a href="#" onClick={() => i18n.activate("pt")}>
        pt
      </a>
      <br />
      <Trans>Here is a button</Trans>
      <br />
      <MyButton label={<Trans>I Change</Trans>} />
      <MyButton label={t`I Don't`} />
    </I18nProvider>
  );
}

const MyButton = ({ label }) => {
  return (
    <button>
      <span>{label}</span>
    </button>
  );
};

export default App;

Expected behavior I would expect t`` to change when activating language change.

Additional context Using <Trans/> in the attribute works.

• jsLingui version lingui --version 3.8.10
• Babel version npm list @babel/core 7.12.3
• Your Babel config (e.g. .babelrc) or framework you use (Create React App, Meteor, etc.) No .babelrc, straght create-react-app

[cdaycmc]

I found the issue comparing my code to yours. Moving the I18nProvider to a higher component updated the translations as required for t().

Note: no useEffect is required for this to work.

import "./App.css";
import { i18n } from "@lingui/core";
import { I18nProvider } from "@lingui/react";
import { messages as en } from "./locales/en/messages.js";
import { messages as pt } from "./locales/pt/messages.js";
import { Trans, t } from "@lingui/macro";

i18n.load("en", en);
i18n.load("pt", pt);
i18n.activate("en");

function App() {
  return (
    <I18nProvider i18n={i18n}>
      <AApp></AApp>
    </I18nProvider>
  );
}

const AApp = () => {
  return (
    <>
      <a
        href="#"
        onClick={() => {
          i18n.activate("en");
        }}
      >
        en
      </a>
      |
      <a
        href="#"
        onClick={() => {
          i18n.activate("pt");
        }}
      >
        pt
      </a>
      <br />
      <Trans>Here is a button</Trans>
      <br />
      <MyButton label={<Trans>I Change</Trans>} />
      <MyButton label={t`I Dont`} />
      <Trans>I Dont</Trans>
      <br />
      <span>
        <Trans>
          But here is something that has <a href="#">a link</a> in the middle of
          the text.
        </Trans>
        xx
      </span>
    </>
  );
};

const MyButton = ({ label }) => {
  return (
    <button>
      <span>{label}</span>
    </button>
  );
};

export default App;

[semoal]

In the previous code you pasted, it’s also wrong…

  const activate = useEffect(() => {
    i18n.activate("en");
  });

This causes an infinite loop because you’re not specyfing to only render on mount.

  const activate = useEffect(() => {
    i18n.activate("en");
  }, []);

This is the correct code, and must work as expected