Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

useLocalization data is not reactive #49

Open
cmrd-senya opened this issue Nov 20, 2021 · 2 comments
Open

useLocalization data is not reactive #49

cmrd-senya opened this issue Nov 20, 2021 · 2 comments

Comments

@cmrd-senya
Copy link

The plugin provides React hook useLocalization. It is used like this:

const { locale, defaultLocale, locales, localizedNavigate } = useLocalization()

However these values are not reactive, e.g. locale value. If I navigate to localized url from /en/slug to /fr/slugusing the usual Gatsby Link components, the page is being routed to the new address without reload but locale value remains the same it was before - en in my example while URL is /fr/slug already. My expectation is that locale value coming from the hook is changed reactively as the page is navigated to other language URLs.

This happens because the values are cached with useState here:

const [localization] = useState({

But the value that comes from pageContext is actually reactive and changes as URL changes:

const { locale, defaultLocale, locales } = pageContext;

So in theory it's not a problem to fix that and pass locale down without caching. So is there any particular reason to cache it not update as locale from pageContext updates?

@herecydev
Copy link
Owner

That seems like a massive oversight, the correct fix would be to use useMemo I think. That preserves the caching but will invalidate when locale changes. I think Gatsby has this built in now, which is why I'm not actively working on this anymore

@cmrd-senya
Copy link
Author

@herecydev I'm not aware of it being built in in Gatsby. If you know where to learn about please give a reference.

Gatsby official docs recommend using this plugin with the same purpose and unfortunately similar name: https://github.com/angeloocana/gatsby-plugin-i18n

However I don't really like the convention they used in that plugin, where the localized files have to be created one copy per locale. That's why I was looking for alternative and ended up using your plugin instead of the one from the doc.

But I don't know too much about Gatsby so maybe I'm missing some major piece here. However as for what it seems to me know your plugin is a viable and meaningful alternative to the plugin from the official docs so maybe could potentially be mentioned there along with the other one.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants