React-i18next: TypeError: Cannot read property 't' of null (when inspecting tree using React dev tools)

[hansott]

Describe the bug
When I'm inspecting a function component with the React dev tools that uses the useTranslation hook, I'm getting the following error:

In my component:

const { t } = useTranslation("producers");

Probably this line: https://github.com/i18next/react-i18next/blob/master/src/useTranslation.js#L79

Occurs in react-i18next version
i18next: 15.0.8
react-i18next: 10.6.0
React: 16.8.3

To Reproduce
Inspect the component using React dev tools

Expected behaviour
No TypeError

Screenshots

OS (please complete the following information):
Chrome 76 (macOS 10.14.4)

[hansott]

More details:

[jamuhl]

That only occurs when inspecting...hm...looks like a case of quantum physics...observing the experiment has an influence on the result ;)

No idea what's the cause...might be something for the people created the react dev tools?

[hansott]

@jamuhl Yeah, I was not sure whether this was a valid bug... Maybe we can just add a null check for now? I can create a PR for it?

[jamuhl]

Go ahead with a PR...if that is enough to get it "work" it's ok for me...

[jamuhl]

closing this due inactivity...PR still welcome

[staka121]

useState used in React dev tools is not supported, before React 16.9.0.
However, react-i18next used useState in React dev tools.
Probably cause that 't' was null is this.

Add support for editing useState state from DevTools. (@bvaughn in #14906)
https://github.com/facebook/react/releases/tag/v16.9.0

The simple solution is to update React after v16.9.0.