Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Async function in useEffect causes loop when using the default namespace #779

Closed
aya-eiya opened this issue Feb 7, 2022 · 2 comments
Closed

Comments

@aya-eiya
Copy link

aya-eiya commented Feb 7, 2022

In a situation where I set the default namespace as an argument of useTranslation to get t and monitor it with useEffect, I found that when I call asynchronous functions such as setTimeout in useEffect, the function keeps being called infinitely.

Here is the reproduction code.

import useTranslation from 'next-translate/useTranslation'
import { ReactElement, useEffect, useState } from 'react'

export default function I18nTest(): ReactElement {
  const { t } = useTranslation('common')
  const [text, setText] = useState('')
  useEffect(() => {
    const ts = setTimeout(() => {
      setText(new Date().toISOString())
    }, 1000)
    return () => clearTimeout(ts)
  }, [t])
  return (
    <div>{text}</div>
  )
}

Is this the expected behavior?

Environments

$ node --version
v14.18.2
"dependencies": {
  "next": "^12.0.10",
  "next-translate": "^1.3.3",
  "react": "^17.0.2"
}
@aralroca
Copy link
Owner

aralroca commented Feb 7, 2022

This was solved in: #574

And reverted to solve this bug with Component.layout: #604

There is currently a PR proposal to put it again: #743 ...

However you can memorize the t as workaround or use lang as dependency.

@aya-eiya
Copy link
Author

aya-eiya commented Feb 7, 2022

Thanks @aralroca for response, I know it's a bug, then I'll take the work-arounds when it becomes an issue in my project until it is resolved.

@aya-eiya aya-eiya closed this as completed Feb 7, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants