Fix dependables of useTranslation hook (#829)

Memoizing the t-function seems reasonable. A proper implementation must respect several scenarios; what you put into dependable array matters.

Why the property "lang" of the ctx-object is required?
Allows switching the language while a page is already loaded.

Why does using the entire ctx-object as a dependable does not work, especially in animation use cases?

Using animation in page components when a page exits is common. The exiting component will finish its exit animation before the entering component gets rendered.

Libraries should not be aware of those effects (not providing any special APIs for handling those things).

Changing a route, NextJs, e.g., immediately responds by triggering defined procedures.

In the context of libraries such as next-translate, which depend on NextJs lifecycle and procedures, it is critical to subscribe to those on a minimalistic baseline.

Properly supporting page exit animations mean that a component resolved translations of the "past-state" need to stay intact even when NextJs already has loaded the next page.

The context changes when the next page gets loaded; mounted components need to keep their translation until the component is unmounted and its representation gets erased from the DOM.

Co-authored-by: Gritsch Markus <[email protected]>

src/useTranslation.tsx

@@ -10,6 +10,6 @@ export default function useTranslation(defaultNS?: string): I18n {
  ...ctx,
  t: wrapTWithDefaultNs(ctx.t, defaultNS),
  }),
- [ctx, defaultNS]
+ [ctx.lang, defaultNS]
  )
 }