Description
hello and thank you for your package!
we use it since first releases and happy now with removing state from provider and new ref implementation. bug with stale dict affected us too.
for now we noticed one more bug and it looks like it is connected with refs implementation.
the t function from useI18n hook is not changing when locale is switched.
so if we have something like:
const navigationItems = useMemo(
() =>
navigation.map(({ name, url }) => (
<Link
href={url}
key={name}
>
{t(name)}
</Link>
)),
[navigation, asPath, t]
)
return <nav>{navigationItems}</nav>and then if we switch locale - the hook is not rerunning and page is not rerendered. workaround here is explicitly add locale from router to useMemo deps array:
const {locale} = useRouter()
const navigationItems = useMemo(
() =>
navigation.map(({ name, url }) => (
<Link
href={url}
key={name}
>
{t(name)}
</Link>
)),
[navigation, asPath, t, locale]
)
return <nav>{navigationItems}</nav>but this workaround causes eslint-react-hooks error since locale is not used inside hook but still present in its deps array. it looks like t function should change in locale change.
in examples below assuming that navigation is something like:
const navigation = [
{
name: 'navigation.foo',
url: '/foo'
},
{
name: 'navigation.bar',
url: '/bar'
},
]and our locale is:
const locale = {
navigation: {
foo: 'Foo Page',
bar: 'Bar Page'
}
}