add useMemo cache too, in case we're juggling with many intlConfigs

packages/react-ui/src/hooks/useImperativeIntl.js

@@ -1,5 +1,6 @@
 import { createIntl, createIntlCache } from 'react-intl';
 import { messages } from '../localization';
+import { useMemo } from 'react';
 import {
   flattenMessages,
   findMatchingMessagesLocale,
@@ -11,12 +12,12 @@ const cache = createIntlCache();
 let lastIntlConfig;
 let cachedC4rIntl;
 
-export default function useImperativeIntl(intlConfig) {
+const getGloballyCachedIntl = (intlConfig) => {
   if (!cachedC4rIntl || lastIntlConfig !== intlConfig) {
-    // this is very naive cache that bases on fact that Intl instance is actually same for most of time
+    // This is very simple cache exploits fact that Intl instance is actually same for most of time
     // so we can reuse those maps across several instances of same components
     // note, useMemo can't do that globally and flattenMessages over _app_ and c4r is quite costly and would
-    // be paid for evey c4r component mounted
+    // be paid for every c4r component mounted.
     const locale = intlConfig?.locale || DEFAULT_LOCALE;
     const messagesLocale = findMatchingMessagesLocale(locale, messages);
     const intMessages = {
@@ -35,4 +36,9 @@ export default function useImperativeIntl(intlConfig) {
     lastIntlConfig = intlConfig;
   }
   return cachedC4rIntl;
+};
+
+export default function useImperativeIntl(intlConfig) {
+  // second level cache, in components is just to avoid re-creating the Intl instance if user is rendering many languages in one app
+  return useMemo(() => getGloballyCachedIntl(intlConfig), [intlConfig]);
 }