Namespaces should be automatally loaded without passing defaultNs to useTranslation

[laneme]

Currently, if I want to use multiple namespaces in one component, i have to do something like thie

const t1 = useTranslation('common')
const t2 = useTranslation('home')
const t3 = useTranslation('common_part_2')

// then use like t3.t('button text')

This gets troublesome quickly with larger locales where I have to split them into many files/namespaces.
Even in the most common scenario, with just a common and home namespace, i have to use useTranslation twice.

Am I missing something or this is how everyone has been doing it?

[aralroca]

This is one of the ways in order to do it... The other is use only one useTranslation and specify the namespace consuming the t:

const t = useTranslation()
// Consume translations with the namespace
const commonTranslation = t('common:some-key')
const homeTranslation =  t('home:some-key')
const common2Translation =  t('common_part_2:some-key')

or

const t = useTranslation('common') // the default is common
// Consume translations with the namespace
const commonTranslation = t('some-key') // Without namespace is the common
const homeTranslation =  t('home:some-key')
const common2Translation =  t('common_part_2:some-key')

[zachguo]

It would be nicer if useTranslation accepts an array of namespaces.