setLocale function is not stable

[vchirikov]

Version

5.24.3

Describe the bug

Hi @ivanhofer, first of all thanks for the awesome lib.
I found the issue with setLocale with react - it can't be used as dependency in useEffect for example, because it causes:

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

the code:

const { setLocale } = useI18nContext();
useEffect(() => {
    setLocale('de');
    return () => setLocale('en');
  }, [setLocale]);

Ofc I can not provide setLocale as dependency, but I think this is a bug, and setLocale must be stable as setState.

Reproduction

git clone https://github.com/vchirikov/typesafe-i18n-issue-repro
cd typesafe-i18n-issue-repro
npm i && npm run start

Logs

No response

Config

No response

Additional information

No response

[vchirikov]

I'm pretty sure that you can use useCallback / useMemo here to not recreate the function, isn't it?
https://github.com/ivanhofer/typesafe-i18n/blob/ef213960a555b353c4dfca563567f73f25711cb0/packages/adapter-react/src/index.tsx#L56-L59

[ivanhofer]

Yes, you are right. We had the same issue in the solid adapter, but it seems I forgot to also update the react code.
I'm AFK until begin of next week. Would you like to create a PR?

[vchirikov]

Ok, I did it in #685

[ivanhofer]

Fixed in version 5.24.4