Preventing remount of custom renderer when updating UI schema

General
1

I have a use case where my schema and uischema contain variables that reference the current formData.

When formData changes, I resolve those variables outside of JSON Forms. If any referenced data changed, I re-generate the resolved schema/uischema and pass them back into JSON Forms.

This generally works fine. The problem is with a custom renderer I wrote for a Select component:

  • Every time the uischema changes, my custom renderer is remounted.

  • This causes the Select to flicker and temporarily lose its value.

  • I can re-pass the value so the data isn’t lost, but the flicker from the remount is still very noticeable.

Question:
Is there a way to update a uischema in JSON Forms without triggering a full remount of the custom renderer? Or alternatively, is there a recommended approach to handle dynamic uischema updates without causing this kind of flicker?

Thanks!

2

Hi @jenn4453 ,

unfortunately there is no way to update the schema or ui schema without triggering a full re-render. Typically a re-render should not trigger a remount if the layout and the key of the renderer stays the same. If you change the layout structure down to where the custom renderer is rendered, the remount is expected.

Or alternatively, is there a recommended approach to handle dynamic uischema updates without causing this kind of flicker?

This depends on your use case, i.e. what kind of dynamic updates to the uischema and schema you are doing. Could you elaborate on that?

For instance, select options to display can be directly loaded by the custom renderer or handed into it via a context (e.g. React context in case you use the React renderers).

Best regards,

Lucas