(@aws-amplify/ui-react): Component re-render on I18n.setLanguage

Is your feature request related to a problem? Please describe. Components are not re-rendering on I18n.setLanguage. Components are rendering initial language strings correctly but they do not re-render on language change.

Relates to aws-amplify/amplify-js#6346 aws-amplify/amplify-js#6115 #6962

Describe the solution you’d like Components should re-render on I18n.setLanguage

Suggestion from @ericclemmons https://github.com/aws-amplify/amplify-js/pull/6346#issuecomment-710227501 :

If I18n.setLanguage fired a Hub event, we could re-render the component 🤔 https://github.com/aws-amplify/amplify-js/blob/377acd0507e6d4be34bf36ea9c0694fa98ac04b1/packages/core/src/I18n/I18n.ts#L64-L66

Describe alternatives you’ve considered

1. Force re-render using key attribute

   <AmplifySignIn key={lang} />
   

   Force re-creating the components will result in a screen flicker and loss of component state
2. Specifying all texts in props

   <AmplifySignIn 
     headerText={I18n.get(Translations.XXXXX)}
     formFields={[
       {
         type: "email",
         label: I18n.get(Translations.XXXXX),
         placeholder: I18n.get(Translations.USERNAME_PLACEHOLDER),
         required: true,
       },
       {
         type: "password",
         label: I18n.get(Translations.XXXXX),
         placeholder: I18n.get(Translations.PASSWORD_PLACEHOLDER),
         required: true,
       }
     ]}>
   </AmplifySignIn>
   

   Doable but a big hassle : D

Additional context This is happening in @aws-amplify/ui-react. Need to check if other ui-components e.g. angular, vue, etc exhibit the same behavior.

[wei]

@eokoneyo For now, you can specify attributes directly as seen in https://github.com/aws-amplify/amplify-js/issues/6962#issuecomment-710701413

[ericclemmons]

We’ll need to a PR to Amplify JS so I18n emits Hub events when the language changes.

Only then can the UI components subscribe to this event & re-render with the new dictionary.