React-i18next: react-hooks example is broken

[unindented]

Describe the bug
The react-hooks example in the repo seems to enter an infinite loop. My app experiences the same issue when using useTranslation.

Occurs in react-i18next version
Checked out commit 458d2426e04321567534d3d2a35d4eebc76e509a.

node --version
v10.12.0
npm --version
6.4.1

To Reproduce
Steps to reproduce the behavior:

git clone https://github.com/i18next/react-i18next.git
cd react-i18next/example/react-hooks
npm install
npm start
<open in browser and see browser tab lock up>

Expected behaviour
Page should load normally.

Screenshots
N/A

OS (please complete the following information):

• Device: MBP 2015 15"
• Browser: Chrome 70.0.3538.110

Additional context
I think throwing the promise in useTranslation is what starts the infinite loop.

[jamuhl]

Can't reproduce...thowing promise triggers the suspense

[unindented]

@jamuhl did you clone a fresh repo, or reuse an existing one? If you clone fresh and npm i, you'll end up with [email protected]. Maybe you're still on alpha.0 which didn't exhibit this problem?

[jamuhl]

just tried removed node_modules, lockfiles -> updated dep. to alpha.2 -> npm i -> npm start -> all runs

node 9.3 here...but that should be irrelevant.

[unindented]

Dang, what could be the difference between your environment and mine then? I'm able to repro in every browser installed on my computer (Chrome, Safari, Firefox, Opera), and I just ran the steps above:

git clone https://github.com/i18next/react-i18next.git
cd react-i18next/example/react-hooks
npm install
npm start

[unindented]

Ok, the problem seems to be that ready in useT.js is always false for me, because my navigator.languages returns ['en-US', 'en'], but the translations file lives under en/translation.json.

If I open http://localhost:3000/?lng=en in my browser, things work fine.

Do you happen to have a cookie, or something else, that's telling i8next to load en instead of en-US?

[unindented]

I can repro when I try to load any locale that's not exactly en or de. So something like http://localhost:3000/?lng=es should trigger the issue for you too.

[jamuhl]

ah...now I see...yes...will need to think how to solve this: https://github.com/i18next/react-i18next/blob/master/src/hooks/useTranslation.js#L42

check for i18n.languages[0] seems to fail in this cases not yet 100% sure why...might be we not set those namespaces to empty on error - will check this tomorrow.

[unindented]

@jamuhl awesome, thanks for looking into this! I'm really excited about this i18next hooks API!

[jamuhl]

could you try with: [email protected]

please note:

• useT is now useTranslation https://github.com/i18next/react-i18next/blob/master/example/react-hooks/src/App.js#L29
• withT is now withTranslation https://github.com/i18next/react-i18next/blob/master/example/react-hooks/src/App.js#L16
• initReactI18n is now initReactI18next https://github.com/i18next/react-i18next/blob/master/example/react-hooks/src/i18n.js#L14

[unindented]

@jamuhl it's working!

[unindented]

Thank you very much for fixing it in such short notice!

[jamuhl]

If you like this module don’t forget to star this repo. Make a tweet, share the word or have a look at our https://locize.com to support the devs of this project -> there are many ways to help this project :pray: