t is not refreshed when keyPrefix is changed

[halouvi]

🐛 Bug Report

I wanted to use a dynamic keyPrefix in my component to support an A/B test we're running on the copy of a component.
When the component mounts, i fetch a new variant for the current user and so in the initial render, the keyPrefix is suffixed with an undefined that resolves to one of my variants as soon as the fetch is successful, way before the component is ever rendered on screen.

To Reproduce

codesandbox

Expected behavior

useTranslation should reset t when keyPrefix changes and reflect the new keyPrefix

The solution is simple:
Add keyPrefix to the dependency array of the useEffect starting in line 99 in useTranslation.js so that t is reset whenever keyPrefix changes.

Your Environment

• runtime version: chrome
• i18next version: 21.8.10
• os: Mac

[adrai]

Would you like to send a Pull Request to address this?

[halouvi]

Sure, i'd love to.

[halouvi]

I couldn't create a new branch though.

[adrai]

just fork the repo and create a PR: https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request

[adrai]

try to solve it like this: 47d9670

[halouvi]

I'm trying to understand why usePrevious was added in 47d9670.
I mean, there's this equality check previousJoinedNS !== joinedNS but as i understand it, since joinedNS is in the dependency array and is a string, that useEffect will not have even run again if previousJoinedNS === joinedNS.

If the namespaces array itself was placed in the dependency array it would have made more sense to me because the object reference would have change but since its passed as a string i don't really see the purpose.

[adrai]

#1517 (comment)