Shallow routing for I18nProvider

[andrewdoro]

I tried implementing shallow routing for the I18nProvider, but it looks like the router from useRouter hook is not updating event if the inside the Next app it changed, any idea why this is happening?

import React, { createContext, useContext, useEffect, useState } from 'react'
import { useRouter } from 'next/router'
import I18nContext from './_context'
import transCore from './transCore'
import useTranslation from './useTranslation'
import { I18nDictionary, I18nProviderProps, LocaleLoader, Translate } from '.'

export const InternalContext = createContext({ ns: {}, config: {} })

export default function I18nProvider({
  lang: lng,
  namespaces = {},
  children,
  config: newConfig = {},
}: I18nProviderProps) {
  const { lang: parentLang } = useTranslation()
  const router = useRouter()
  const { locale, defaultLocale, events } = router || {}
  const internal = useContext(InternalContext)
  const [allNamespaces, setAllNamespaces] = useState<
    Record<string, I18nDictionary>
  >({
    ...initialBrowserNamespaces(),
    ...internal.ns,
    ...namespaces,
  })

  const [lang, setLang] = useState(
    lng || parentLang || locale || defaultLocale || ''
  )
  const config = { ...internal.config, ...newConfig }
  const localesToIgnore = config.localesToIgnore || ['default']
  const ignoreLang = localesToIgnore.includes(lang)
  const pluralRules = new Intl.PluralRules(ignoreLang ? undefined : lang)
  const t = transCore({ config, allNamespaces, pluralRules, lang })

  const defaultLoader = async () => Promise.resolve<I18nDictionary>({})
  const loader: LocaleLoader = config.loadLocaleFrom || defaultLoader

  useEffect(() => {
    const updateNamespaces = async (newLang: string) => {
      let newAllNamespaces: Record<string, I18nDictionary> = {}
      await Promise.all(
        Object.keys(namespaces).map(async (namespace) => {
          newAllNamespaces[namespace] = await loader(newLang, namespace)
        })
      )
      setAllNamespaces(newAllNamespaces)
    }
    const shallowLangChange = (
      _: string,
      { shallow }: { shallow: boolean }
    ) => {
      if (locale && shallow) {
        updateNamespaces(locale)
        setLang(locale)
      }
    }
    events.on('routeChangeStart', shallowLangChange)

    return () => {
      events.off('routeChangeStart', shallowLangChange)
    }
  }, [router])

  return (
    <I18nContext.Provider value={{ lang, t }}>
      <InternalContext.Provider value={{ ns: allNamespaces, config }}>
        {children}
      </InternalContext.Provider>
    </I18nContext.Provider>
  )
}

function initialBrowserNamespaces() {
  if (typeof window === 'undefined') return {}
  return window.__NEXT_DATA__?.props?.__namespaces || {}
}