react-i18next: passing t function to all children or useTranslation in every child?

Question

I'm using react-i18next to translate my react app.

For every different "main" pages (navigated from the menu), I get t() function with useTranslation; and for children components of these pages, I pass the t with other props to the children.

I'm wondering if I was doing it the right way?

Is it better to get t with useTranslation inside each child, instead inside their parents?

Answer 1

IMHO using useTranslation in every component is the better way, because:

• your component structure is more consistent (leading to uniformity)
• you don't have to decide wether doing it one way or the other (which helps conceptional integrity, especially when working in teams)
• your components are easier to reuse (because they don't ask for things they can get on their own)
• if you are using PropTypes or TypeScript you will simply write less code, because all types are inferred automatically