'Update react state based on i18next.language

As changing language doesn't force a rerender of all components in my project I tried a simple workaround by using the useState hook which takes i18next.language, and then update the state whenever i18next.language changes, however this doesn't seem to do the job.

  const [currentLanguage, setCurrentLanguage] = React.useState<string>(
    i18next.language
  )
  console.log('The language is:', currentLanguage)
  useEffect(() => {
    setCurrentLanguage(i18next.language)
    console.log('Language in useEffect:', i18next.language)
  }, [currentLanguage])

The console printouts looks like this

The language is: se 
i18next: languageChanged en 
The language is: se 

I'm sure I must be missing something really basic, but I figured it could be worth a shot asking here as a more experienced developer can probably see the fault in seconds.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source