Infinite loop when user is too fast with clicking

[RyanLinXiang]

Describe the bug

We adapted the Vanilla package for our project to work with React (16.13.1) Native (0.63.4). The problem which occurs is when user is too fast with clicking on an UI element like a radio button, somehow this causes an infinite loop and the app crashs. The structure of the component looks like this:

class Parent {
  //... 
  
 @bind
 private onChange({errors, data}) {
    this.setState({errors, data});
  }

  public render() {
    <JsonForms
      //...
      onChange={this.onChange}
    />
  }
}

When I prevent the Parent component from rerendering (e.g. by using "shouldComponentUpdate") everytime onChange is called the infinite loop issue is gone. Also this issue does not occur when the user slowly clicks on UI elements. So any explanation for this behavior?

Expected behavior

There should be no infinite loop no matter how quick or how slow a user clicks on an UI element and triggers rerenderings within JsonForms/in its parent component

Steps to reproduce the issue

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Screenshots

No response

In which browser are you experiencing the issue?

React Native 0.63.4

Framework

React

RendererSet

Other (please specify in the Additional context field)

Additional context

We are using customized Vanilla package to work with React Native

[sdirix]

Hi @RyanLinXiang, I don't know of any issue where JsonForms runs into an infinite loop by itself.

I have an idea what the problem could be:

JSON Forms will emit a change event:

• on first render (to tell the validation result)
• whenever the user modifies data (to tell data changes and validation result)
• whenever a new data object is given to JsonForms which is not the same as emitted by JsonForms (to tell the validation result)

Now the question is what you do with the data emitted by JsonForms. When you just hand it over to JsonForms again, then this shouldn't be the reason for the infinite loop. However when you sometimes (or always) adapt it, then this could run into an endless loop and needs to be avoided, for example by not creating a new data instance when you don't adapt it. As the endless loop only happens for you when the user acts fast, I would guess some useEffect is in play here.

Of course I could be completely wrong with my idea. For example there could also be something going wrong with your custom renderer set.

Can you post more of the context and how you use JsonForms? Is the renderer set available for inspection? If yes can you point to a reproducible example of the problem? If not, can you create a reproducible example (partly) leveraging the off-the-shelf renderer set?

[RyanLinXiang]

Hello @sdirix, thanks for the quick response. I will try to get a reproducible example working.

But to answer your questions for now - I checked all of my custom renderers and could not find any places where an infinite loop could be caused - e.g. no useEffect is used nowhere as these are really simple components without their own state. For the data part, I just hand them over to JsonForms again without any adaptions:

class Parent {
  //... 
  
   constructor(props) {
        super(props);
        this.state = { data: this.props.initialData, errors: [] };
    }

 @bind
 private onChange({errors, data}) {
    this.setState({errors, data});
  }

  public render() {
    <JsonForms
      //...
      data={this.state.data}
      onChange={this.onChange}
    />
  }
}

Could you explain a little more why the loop may be caused if data are adapted and handed over to JsonForms again? Could here be that setState is not fast enough to update the state and that then of course the data object from state passing to JsonForms is different (older) than that what JsonForms lastly emitted - and this will cause the loop?

[sdirix]

JSON Forms emits a new event whenever it receives new data. However if the data it has stored internally is equal to the one it newly receives, it will do nothing.

So the normal update loop is like this:

1. The user changes some value
2. The internal storage of JSON Forms is updated with a new data object and is validated
3. JSON Forms emits the new data and errors.
4. Parent receives the new event and updates its own data and/or errors state
5. Because Parent updated its state, it will rerender
6. In the rerender pass, JSON Forms will receive a new data object (the one it emitted earlier)
7. JSON Forms sees that the new data passed to it is the one it already stores and aborts the rerender chain

The typical endless loop is like this:

1. The initial event is emitted by JSON Forms
2. Parent receives the new event and updates its own data and/or errors state and modifies the data again to a new instance
3. Because Parent updated its state, it will rerender
4. In the rerender pass, JSON Forms will receive a really new data object
5. JSON Forms sees that it receives a data object it doesn't know anything about and therefore assumes it was given it on purpose (typical use case is for example clearing or resetting the form)
6. JSON Forms updates its storage, validates the data and emits a new event
7. Parent receives event.... see Step 2

Somehow it seems we are in a different loop in your case which only triggers when the user is fast. So maybe related to the initial event...

• Does it also occur after the first rendering, when the user acted slow but later on does very quick changes?
• With useEffect I did not mean within your renderer set, but within the Parent or indirectly related to it.
• Can you do some console.logs and print the whole data you pass to JSON Forms with each render call in the endless loop case? Maybe there is some "ABABA" endless loop happening, with events interleaving each other each triggering a rerender and therefore the emit of the other event.

[RyanLinXiang]

Thanks for the detailed explanation and yes then we are talking about a complete different kind of trigger. And the loop can occur at any stage when the user is not patiently enough :)

Especially during the first rendering when the UI is not completely built and you see that the containers are still streching to get the right size - especially here when you click on one of the buttons rendered by JsonForms an endless loop will often be the result.

I console.logged the render calls and there is always this pattern:

Parent
Children... (from Categorization to the cell component)
Parent
Children...(from Categorization to the cell component)
...

It is a very good hint to check which data were emitted and actually sent to JsonForms in the endless loop case - I will do that.

[RyanLinXiang]

Here are the logs of emitted (from JsonForms) vs. sent data (to JsonForms) - as you can see there are the same. I could reproduce the endless loop with just one question:

[Thu Jul 08 2021 18:54:41.652] LOG DATA SENT: {"chronic": "nein"}
[Thu Jul 08 2021 18:54:41.798] LOG DATA EMITTED: {"chronic": "nein"}
[Thu Jul 08 2021 18:54:41.812] LOG DATA SENT: {"chronic": "nein"}
[Thu Jul 08 2021 18:54:41.884] LOG DATA EMITTED: {"chronic": "nein"}
[Thu Jul 08 2021 18:54:41.897] LOG DATA SENT: {"chronic": "nein"}
[Thu Jul 08 2021 18:54:41.951] LOG DATA EMITTED: {"chronic": "nein"}
[Thu Jul 08 2021 18:54:41.964] LOG DATA SENT: {"chronic": "nein"}
[Thu Jul 08 2021 18:54:42.340] ERROR Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
in Unknown

[sdirix]

I tried reproducing the issue with our React Vanilla renderer set however I was not able to. Throttling to low-end mobile device speed didn't help too. Maybe the issue is also related to react-native as I don't have that much experience with it. Until we can reproduce the issue I don't know whether the problem lies within JSON Forms or somewhere in your application / custom renderers.

As the content of the data is always the same you can use a workaround: Before updating the state in Parent you can deep-equal the incoming data and not update the state if they are the same. This can easily be implemented with lodash's isEqual.

[RyanLinXiang]

I tried to reproduce the error in a separated package, but could not. So yes, the bug should not be caused within JsonForms but must be rooted in our application. Nonetheless I am sharing with you the working separated package where I included a customized RadioButtonGroup renderer for React Native which renders a very simple schema.

Thank you very much for the quick responses - it was very helpful!

[sdirix]

Hi @RyanLinXiang! Thanks for sharing! We sometimes get questions whether we'll support React Native in the future. I usually answer that they can add a RN renderer set themselves if they want to. Is it fine with you when I point them to your example renderer set to get inspiration from?

I took a look at the code. Is this the same way Parent is using JsonForms?

I did not yet run the code so maybe I'm missing something, however in the linked App.tsx a new schema (and uischema) instance is created with each render call. I would expect that JSON Forms notices this, and, because the schema changed, will validate the data, rerender and emit a new change event. As this will trigger a rerender of App a new schema instance is created etc. etc.

I can take a closer look next week, but can you reproduce this flow in the example code? Is this the same way Parent uses JsonForms? However what this doesn't explain is why it only happens for you when the user is acting fast....

[RyanLinXiang]

Hi @sdirix! Sure you can reference to my example. Actually that is all you need to setup React Native with JsonForms. The most challenging part was the patches with polyfills. But after that e.g. the Vanilla package can be just straightly rewritten to include React Native components.

Yes, App.tsx from the example is basically our Parent in real - the code is nearly identical. Because of the complexity of our schemas we separated them into different .json files and merge them in Parent together. But they are not adapted/modified in any way! So JsonForms triggers a rerender even in that situation? I thought from your description that similar to how JsonForms recognized that data has not changed it will also recognize that schema/uischema instances don't differ...

However - if you run the example project you will see that this does not cause the endless loop - the example project just works fine without me being able to reproduce this strange bug. In our real project I just deleted the merging functions and passed to JsonForms the imported .json schema/uischema files directly. But even so the endless loop appears again if I click too fast on the radio buttons. So I guess the root cause must be something very different.

[RyanLinXiang]

Hi @sdirix: as an addition to what I wrote yesterday: I have now located the bug!

It is in JsonFormsContext.tsx, line 127ff:

useEffect(() => { coreDispatch( Actions.updateCore(data, schema, uischema, { ajv, refParserOptions, validationMode }) ); }, [data, schema, uischema, ajv, refParserOptions, validationMode]);

When I remove data out of the dependency list, the endless loop is gone and cannot be reproduced in our app. Do you have an explanation for that? Thank you!