Custom renderers trigger multiple rerenders of the JsonSchema form

General
1

Hello !

My problem :

I am struggling with custom renderers.

What I need to do :

I have to create as many forms as there needs to be in one single page.
The user selects how many forms he needs.

It can go until 27 forms maximum at once.
For one specific input in each of these forms, I have to select multiple choices but it has to be a Select component, not checkboxes.

Here is my situation :

I created a custom renderer for one specific form input of each of the JsonSchema forms created by the user.
I catch the changes through the handleChange function prop provided through the withJsonFormsControlProps HOC.

What is happening :

When I update one custom renderer in one JsonSchema form among all of the JsonSchema forms created, all of my renderers would update.

What I need :

Could someone explain me how custom renderers work please ?

I didn’t understand the documentation quite well.

Thank you a lot !

2

Hi @Perion,

We use basic React mechanisms so there is nothing special about custom renderers which would lead to a lot of rerenderings.

We use React.memo a lot in JSON Forms to increase performance. So to avoid rerendering JSON Forms you need to make sure that you don’t needlessly hand over new parameters with each render pass. Parameter instances should only change when there is actually a noteworthy change in its content.

Can you check whether this is the case for you?

3

Hi @sdirix and thank you a lot for your answer !

First of all, sorry for the long question.
If you don’t have time to answer, please don’t feel obliged.

I managed to make everything work perfectly with one single form.

But my issue has started when I needed several forms and therefore several iterations of the same schema.

What triggers those rerenders is that my jsonforms are in an instance of a form component contained in a parent component.

Any change in my custom renderer (encapsulated in that child form component) would trigger a rerender of the child form component.
This is because the changes are handled in it and they change the data of the form.

For example, I needed to have as many identity form as the user selects from 1 to 27.

Each form is declared as such : username, address and mostly for each identity form a list of nearby addresses (for which I needed a custom renderer).

It is implemented as such :

  Username               Address

  <CustomRenderer>

     List of addresses

  </CustomRenderer>

  Username               Address

  <CustomRenderer>

     List of addresses

  </CustomRenderer>

  Username               Address

  <CustomRenderer>

     List of addresses

  </CustomRenderer>

Etc…

I have one schema object that gets instanciated everytime for each forms.
Am I using JsonForms correctly when I create as many instances of the same schema for every forms needed ?

Have a nice day and thanks again !