Translating validation messages and performance (i18n)

Hi all,

I want to translate the validation messages.
One of the options to do this is to use the i18n property:

In my template:

<jsonforms #jsonForm

In my code:

i18nObj = {
      (key: string, defaultMessage: string | undefined) => {        
        return this.myTranslationService.translate(key, defaultMessage);        

But when I do this, I notice that every time the user enters a character in a text field on the form, the translation service is called for ALL the elements on the form that need translation. In my case it is performing about 100 translation lookups every time the user enters a character (and every time the same lookups).

Why is it doing this? I would expect that the translation function is only called one time for each element.

Hi @cornelos,

Your observation is correct. Most of the internationalization support is implemented within the bindings phase, i.e. it’s performed right before the memo checks which stop rerenderings.

Therefore whenever a potential rerendering of the form is triggered the translations are repeated. So for a 50 input form (which is already quite large) this might actually result in 100+ translation calls each time. Note that the form is rerendered in a debounced fashion, so this will not happen with every character entered by the user, but only when the debounce treshhold was met.

However these translation calls are usually very lightweight. A single rerendering of a Material Input will take more time than 100+ of these translation will do. In case your translationService is especially expensive you can add a cache on your own.

If you or someone else disagrees I’m open for discussion and suggestions for potential improvements. Please post profiler/tracing data to illustrate the impact of the i18n calls on your application.