t`` macro doesn't work when load and activate message about js-lingui

[thekip]

Read the first note in this paragraph.

https://lingui.dev/tutorials/react-patterns#translations-outside-react-components

[thekip]

Here is an issue with an example itself. The app component doesn't get re-rendered since nothing changed from React's point of view.

So the solution would be splitting to root component with provider and children components to be able to use useLingui hook and let LinguiProvider re-trigger render of components subtree

function App() {
  useEffect(() => {
    loadCatalog("en")
  }, [])

  return (
    <I18nProvider i18n={i18n}>
      <AppContent />
    </I18nProvider>
  )
}

function AppContent() {
  const [count, setCount] = useState(0)

  const { i18n } = useLingui()

  return (
    <div className="App">
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://reactjs.org" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
        <a href="https://lingui.dev" target="_blank">
          <img src={linguiLogo} className="logo react" alt="Lingui logo" />
        </a>
      </div>
      <h1>Vite + React + Lingui</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          <Plural value={count} one="# month" other="# months" />
        </button>
        <p>
          <Trans>
            Edit <code>src/App.tsx</code> and save to test HMR
          </Trans>
        </p>
        <p>
          <button
            style={{ marginRight: "20px" }}
            onClick={() => loadCatalog("pl")}
          >
            Polish
          </button>
          <button onClick={() => loadCatalog("en")}>English</button>
        </p>
      </div>
      <p className="read-the-docs">
        <Trans>Click on the Vite and React logos to learn more</Trans>
        <br />

        {t(i18n)`Click on the Vite and React logos to learn more`}

        {/* or */}
        {i18n._(msg`Click on the Vite and React logos to learn more`)}

        {/* or in >[email protected], export underscore from useLingui hook https://github.com/lingui/js-lingui/pull/1721*/}
        {_(msg`Click on the Vite and React logos to learn more`)}
      </p>
    </div>
  )
}

export default App