T function reference is not stable between renders.

[salmanorak]

Describe the bug The reference of t function that returns from useI18n and useScopedI18n is not stable.

To Reproduce reproduce:

Expected behavior The reference of the t function should be stable so it will not cause a re-calculate when it is used in any hook dependency array.

Screenshots after each re-render the useEffect that has only t function dependency is refiring.

About (please complete the following information):

• next-international version [1.1.4]
• Next.js version [e.g. 14.0.1]

Workaround

For know I have wrapped the function with one useState hook.

import { useState } from 'react';
import { useI18n } from '@/locale';

export const useTranslate = () => {
  const [t] = useState<ReturnType<typeof useI18n>>(() => useI18n());

  return t;
};

[salmanorak]

@QuiiBz thansk for fix. When You are planing the release with fixes?

[QuiiBz]

I'd like to merge https://github.com/QuiiBz/next-international/pull/316 that fixes another issue before landing a new release.

[maloyuso]

Hi! @QuiiBz Is there a date to expect the release of a new version including this fix? Thanks 👌

[QuiiBz]

Sorry for the delay - https://github.com/QuiiBz/next-international/releases/tag/1.2.0 has been published!