Input huge delay

[gemmi-arts]

Hi,

I have a serious problem that I don't know how to solve.
I got huge delay on my uniforms form inputs.

Here is info from DevTools:
[Violation] 'input' handler took 216ms

Here is example how it works:
https://streamable.com/c0npw

Did anyone have such a problem? I add that the form is big, about 20 fields.

Edit:
Problem with delay disappears when I remove model.
<AutoForm model={development} ...

[radekmie]

Hi @gemmi-arts. Is development an object which is changing, a constant object with changing content or a model retrieved from onChangeModel?

EDIT: Closed? Have you solved it?

[gemmi-arts]

Hi @radekmie,
I think I found the problem.
Inside a form I've got couple components hat slow down the page.
The problem is due to my fault. I'll check it out :)

[gemmi-arts]

@radekmie
Very strange.
When you type something, the component does't rerender - it's good.
Problem with delay was because of react-table.
Delay occurred if react-table was inside Autoform.
When I moved it out of the Autoform everything works perfect.

[simplecommerce]

Hi, I know this issue is closed and I did not want to open a new one for the same problem.

But I had a question in regards to input delay.
My issue is the following.

I have a form that has dynamic fields, that I need to generate based on a condition, if a certain value has changed.

The problem, is that, whenever I connect all these field and I type in the inputs, I get huge delays because it causes the form to re-render.

I know that I can use onBlur instead of onChange on my fields in order to save on performance, but I was wondering, was there any other ways in approaching this issue?

My current form has fields that depends on changes on other fields and will probably have more in the future and I just want ideas and best approach solutions for this issue.

Hope you can guide me a little in how I should approach this.

Thanks!

[radekmie]

Hi, @simplecommerce (unique nickname by the way :D). In general, uniforms are not heavy (hundreds of fields are OK, lists are a bit worse), because of heavy usage of shouldComponentUpdate. It would be the best to profile updates (either using React Dev Tools, Performance API in your browser or both) and then see, what's the reason. If you'll find something, not in your project, definitely file another issue.

[simplecommerce]

@radekmie Hi, thanks (for the nickname) and the comment!

I love your package and am using it to integrate with Apollo GraphQL for my forms, it works really well!

I was wondering if you guys had a complete full example of a form that has quite a few fields and some that changes or renders based on input changes made to other fields?

It would help a lot to see how you guys implement it vs what I am doing, so I know if its wrong or should be implemented differently.

I am passing context using the example provided with DisplayIf, the only difference is I am wrapping my children components and passing them the uniforms object, but this way I noticed that on every change, it re-renders everything inside, so I am trying to get away from this method.

It probably isn't the right way of using it, but I couldn't figure out any other way to do it to achieve what I wanted. For the moment, I am using onBlur to call onChange function to update my form, because of the input delay.

Thanks for the help again!

[radekmie]

In this case, you may think about implementing shouldComponentUpdate in the DisplayIf. On the other hand, there's a stale (eh) issue #92 - you can add it also there. Anyway, profiling is still relevant, as maybe your fields could also profit from selective updates.

[simplecommerce]

@radekmie Thanks for your help! Another quick question, have you guys noticed that when using material-ui components, like the Grid layout inside the AutoForm, it impacts performance?

Sorry I wasn't being clear, I am using Grid component from material-ui in AutoForm, and since they do not use shouldComponentUpdate, it always re-renders the Grid component and its children whenever a change is done within AutoForm fields.

I noticed that you have a grid prop for fields but in your doc it says it only seems to support bootstrap.

[radekmie]

First thing: it's better not to use old issues for such conversations, as they're pinging too much, not really interested people. Second: in general, the old version of Material-UI was pretty heavy. Finally, no, it wasn't a problem in mine project, with any theme - updating the fields and/or views based on them was.

EDIT: Yes, there's a grid prop, but it's not in each theme, as it's layout-specific.