Translation reset after component is unmounted with useTranslation

[durasj]

I've already mentioned this bug in the #796 (comment). If the namespace is loaded after the component is no longer mounted, the React logs errors

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
in Child (created by App)

Occurs in latest stable at the time of writing - #15.0.6 and react-i18next#10.5.1.

To Reproduce
I've forked the code sandbox - https://codesandbox.io/s/qxj1xykyww

There is a custom backend that resolves only after 5 secs. Before it does, click on the "Toggle child" to remove the child. After 5 secs, error should appear in the console.

Expected behaviour
Loading should be either cancelled or reset should not happen if the component is not mounted anymore. Solution proposals mentioned in the #796 (comment)

[jamuhl]

ok this happens only in the non-suspense case -> so it's save to loadNamespaces in a useEffect for that case to keep that isMounted in a closure

[jamuhl]

should be fixed in [email protected]

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 🙏

[durasj]

I can confirm this is fixed in the 10.6.0. Thank you for the quick fix and good luck with the locize!

[TedSean]

I am using react-i18next -11.3.1. I am still facing this issue.

[jamuhl]

@TedSean please provide a codesandbox with reproduction case