aralroca / next-translate

Next.js plugin + i18n API for Next.js 🌍 - Load page translations and use them in an easy way!
MIT License
2.66k stars 206 forks source link

Add "non-hook" export of useTranslation #1118

Open aralroca opened 1 year ago

aralroca commented 1 year ago

Discussed in https://github.com/aralroca/next-translate/discussions/1117

Originally posted by **axelfriberg** July 20, 2023 Hi! Recently a new rule was added to the eslint-plugin-react-hooks that specifies that hooks cannot be used in async components https://github.com/facebook/react/commit/7118f5dd7bf5f1c44d0d2944ef8ad58e423909ad This version of the eslint plugin is now included in next.js 13.4.10 which meant I started to get an linting error after using the "useTranslation" hook in async pages that fetched data. However, looking into the source code of useTranslation I can see that if you are using the app dir then it is not a hook, just a normal function https://github.com/aralroca/next-translate/blob/master/src/useTranslation.tsx#L18 The problem comes up due to how the linting checks for hooks and that is any function that has the word "use" in the beginning. So what I did to get around this was simply rename the import: ```javascript import createTranslation from 'next-translate/useTranslation'; export default async function HomePage() { const data = await getSomeData(); const { t } = createTranslation(); return

t('hello', {name: data.name})

} ``` Since this linting is included now in next.js and I won't be the last that runs into this my question to you is that if you think it is worth to add another export to the library for usage inside server components? So basically just directly export what is here https://github.com/aralroca/next-translate/blob/master/src/useTranslation.tsx#L18 under a different name? To make it clear it isn't a hook and just a function? If not maybe it is worth to add something to the README that explains that you might need to rename the hook in certain scenarios?
aralroca commented 1 year ago

It's rare this rule because in the server componentes RFC comments about Server hooks 🤔:

https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md#capabilities--constraints-of-server-and-client-components

But if can be a problem we can rename it.