useTranslation hook return object is not memoized

The return object of the useTranslation hook is not memoized, which means it’ll be a “new” object on every render. This is especially an issue when the t function is included in the dependency array of useMemo, useCallback etc.

It can easily be reproduced like this:

import useTranslation from 'next-translate/useTranslation'
import { useMemo, useState } from 'react'
export const UseTranslationRerender: React.FC<{}> = () => {
  const { t } = useTranslation('myroofs')
  const [someValue, setSomeValue] = useState(false)
  useMemo(() => {
    console.log('useMemo')
  }, [t])
  return <button onClick={() => setSomeValue((prev) => !prev)}>Change State</button>
}

By the looks of it the object can be memoized based on the namespace.

[gurkerl83]

@aralroca Tested the canary release, works so far!

[gurkerl83]

@aralroca I have provided a PR for the problem of not losing translations within page exit transitions. See the commit message for more details. The PR baseline is the canary branch.

https://github.com/vinissimus/next-translate/pull/829

Thx!