Unexpected oneOf re-rendering when filling other schema fields [React Material]

[andrecchia]

Describe the bug

Starting from version 3.2.0, with React Material renderers, I observed that any keyboard input in any field triggers a rerender of the oneOf elements.

Expected behavior

The oneOf elements should rerender only when there is keyboard input within their own fields, as was happening in version 3.1.0

Steps to reproduce the issue

• Clone the react seed
• Add this src/CustomText renderer that wraps the MaterialTextControl inserting a Math.random() to make the rerendering evident

    import {
        ControlProps,
        isStringControl,
        RankedTester,
        rankWith
      } from '@jsonforms/core';
      import { withJsonFormsControlProps } from '@jsonforms/react';
      import { Unwrapped } from '@jsonforms/material-renderers';
      import React from 'react';
      const { MaterialTextControl } = Unwrapped;
      
      export const CustomText = React.memo((props: ControlProps) => (
        <>
        <MaterialTextControl {...props} />
        {Math.random()}
        </>
      ));
      export const customTextTester: RankedTester = rankWith(
        1+100,
        isStringControl
      );
      export default withJsonFormsControlProps(CustomText);

• replace the src/schema.json with this, containing a text field and a oneOf:

  {
    "definitions": {
      "address": {
        "type": "object",
        "title": "Address",
        "properties": {
          "street_address": {
            "type": "string"
          },
          "city": {
            "type": "string"
          },
          "state": {
            "type": "string"
          }
        },
        "required": [
          "street_address",
          "city",
          "state"
        ]
      },
      "user": {
        "type": "object",
        "title": "User",
        "properties": {
          "name": {
            "type": "string"
          },
          "mail": {
            "type": "string"
          }
        },
        "required": [
          "name",
          "mail"
        ]
      }
    },
    "type": "object",
    "properties": {
      "testText":{
        "type": "string"
      },
      "addressOrUser": {
        "oneOf": [
          {
            "$ref": "#/definitions/address"
          },
          {
            "$ref": "#/definitions/user"
          }
        ]
      }
    }
  }

• Add the CustomText renderer { tester: customTextTester, renderer: CustomText } to src/App.tsx's array of renderers, comment the uischema in JsonForms element (the default uischema is enough)
• Start the application, fill the Test Text field and observe that everything is rerendering, oneOf included, even if there should be no reason for the oneOf to rerender
• Now, switch to the JSONForms version v3.1.0: git checkout 3ed669c5e6434919b090c7c9981f3c9a643c125c, and reinstall the dependencies npm install; repeat the steps at the previous point and observe that when filling Test Text there is no oneOf rerendering, as it should be.

Screenshots

No response

Which Version of JSON Forms are you using?

v3.3.0

Framework

React

RendererSet

Material

Additional context

No response

[sdirix]

Hi @andrecchia,

Thanks for the detailed report! Much appreciated!

It seems we accidentally broke the memo barrier somewhere in between the versions. Did you already check via the React Dev Tooling which prop is responsible for the rerendering of our components?

[andrecchia]

Hi @sdirix, sorry for the very late reply.
Actually I tried but I could not get the responsible of the rerendering, I am not so used to React Dev Tooling.
I plan to check for it again since in these days I am debugging my application, I will get you updated.

[LukasBoll]

This error occurs in the OnOf-renderer and the Array-renderer. They use a set of translated texts (e.g. for the confirmation dialog). But we create a new translations object each time when mapping the JSONforms state to component props in the core module:

jsonforms/packages/core/src/i18n/i18nUtil.ts

Lines 181 to 192 in c3cead7

	export const getCombinatorTranslations = (
	t: Translator,
	defaultTranslations: CombinatorDefaultTranslation[],
	i18nKeyPrefix: string,
	label: string
	): CombinatorTranslations => {
	const translations: CombinatorTranslations = {};
	defaultTranslations.forEach((controlElement) => {
	const key = addI18nKeyToPrefix(i18nKeyPrefix, controlElement.key);
	translations[controlElement.key] = t(key, controlElement.default(label));
	});
	return translations;

jsonforms/packages/core/src/i18n/i18nUtil.ts

Lines 167 to 179 in c3cead7

	export const getArrayTranslations = (
	t: Translator,
	defaultTranslations: ArrayDefaultTranslation[],
	i18nKeyPrefix: string,
	label: string
	): ArrayTranslations => {
	const translations: ArrayTranslations = {};
	defaultTranslations.forEach((controlElement) => {
	const key = addI18nKeyToPrefix(i18nKeyPrefix, controlElement.key);
	translations[controlElement.key] = t(key, controlElement.default(label));
	});
	return translations;
	};

[sdirix]

Good find. This means we need to handle them differently in the bindings to avoid breaking the memo barrier. Either by customizing the memo handling or by binding them separately (in a transparent fashion).