Localization in Fluent UI component properties with i18n

Question

I am trying Localize Fluent UI component by i18n solution using Typescript and React. But I stuggle with changing name in property..

i18n is implemented according to documentation using hooks (in common component it works well)

but I am unable to change CommandBar items names when I change languege

from functional component

...
return (
...
<CommandBar
  items={CommandBarItems.menu}
)
/>
...
)
..

items is in separate file

import i18n from '../i18n'; 
...
const FileMenuOpen:ICommandBarItemProps = {
    key: Routes.FileMenuOpenRoute,
    name: i18n.t('tpmain:menu.fileOpenLbl'),
    href: `#${Routes.FileMenuOpenRoute}`,
    iconProps: { iconName: 'DocumentSet', style: { fontSize: 16 } }
};

....

CommandBarItems = { menu: [FileMenu, UserMenu, EditMenu, AdviceMenu], farItems: [], }
export default CommandBarItems;

My Issue is that CommandBarItem is translated only once on start.. doesnt react on language change.

I also try to useMemo inside component, but without success:

const { t, i18n } = useTranslation();

const items = useMemo(() => {
    console.log("check for memo working")
    return CommandBarItems.menu
  }, [i18n.language])

return (
...
<CommandBar
  items={items}
)
/>

Please can anyone help me to solve it?

Answer 1

Module-level variables such as FileMenuOpen are only calculated once, when the module loads. The useMemo appears well formed, but is currently always fetching the original static object.

Instead, you want dynamically generate this object on demand. That is easily done by putting your object creation inside a function and return it, and call that from useMemo or whenever needed.

This technique applies not only here, but anytime you need to regenerate Fluent UI component configurations.