ParaglideJS: Recommended pattern for reactive UI change in React?

[rsimon]

Hi,

I'm struggling to find a good pattern for re-rendering a React UI based on a language change. I wondered if anyone has thoughts on a recommended pattern, since I guess it must be a common requirement?

My use case is simple: I have a language switcher dropdown, and if the user changes the language, the whole UI should re-render in the new language.

I believe I saw some people use the current language as a key property to their top-level component. At least in React, however, changing the key will unmount the whole component tree and re-mount new components, thus resetting all component state. Are there any better solutions?

My current workaround is a React Context that holds the current language as a state, and I'm updating it through onSetLanguageTag. I also created a custom hook useLanguage() (which returns the current language tag).

Once I use that hook inside a component, the changing state will force a re-render. That solves my problem. But it still feels odd, because I'm not actually doing anything with the hook return value. I just add the hook at the top of my component.

const MyComponent = () => {

  useLanguage();

  return (
    <div>
      //... etc.
    </div>
  )

}

As I said: works. But doesn't really feel like the best solution. If anyone has thoughts or recommendations, I'd love to hear them!

[samuelstroschein]

The workaround seems good.

Optimizing re-renders for language changes is the wrong direction. A user changes the language once. That one change can trigger a re-render of the entire app, which is fine.

@rsimon are you using paraglide JS with only React (not NextJS)?

@LorisSigrist agree that this workaround is good?

[rsimon]

Thanks! Yes, using it with React only, on a single page app. No NextJS.

I guess my case is also a bit special, since it's a map search interface. Remounting the whole component tree is a fairly costly operation, and introduces visual glitches - like the whole map being cleared and redrawn. Which is why I'd rather avoid a "hard" re-render. But as long as the workaround looks fine, that works for me :-)

[samuelstroschein]

@rsimon are you using the useLanguage() hook in every component that uses messages or only in the root component?

[rsimon]

In every component that uses labels.