I'm using next-i18next to translate my Next.js pages. I'm wondering if using
const { t } = useTranslation('common') everywhere for each react component would have a negative impact on performance. The alternative would be calling it in the parent and passing it down to the children which IMO is not a smart solution since it add an extra prop to each component.
It is the way to do it.
The alternative as you describe it, passing the function itself as a prop, is essentially the same thing. It would just point to a reference of the original function.
But, passing it as a prop would likely add more overhead to react internally as the rendering process would need to find out if that prop changed, on every component it passes through.
Using t() as destructured from a hook, you would just call a reference to the function, nothing more.