Model initialization on re-render

[mdesousa]

Hi, I have a form with a model that is being initialized as shown below.
We are having a challenge because the onSubmit function performs actions that re-render the component. During this time, the form briefly resets to the application state. Is there a way to set the model that would tell the AutoForm to use the model in its current state? We tried setting model to undefined and null... but they don't achieve what we want, which is for the model to remain unchanged. thanks.

const model = ... // initialized from application state
<AutoForm schema={schema} model={model} onSubmit={onSubmit}>
 ...
</AutoForm>

[wadamek65]

Hi @mdesousa ,

onSubmit triggers renders due to the fact that it's setting the submitting state, but that should not be causing the behavior that you have described.

Your example of code may suggest that this happens due to the change of model variable in the component's body which you generally would want to avoid or keep a stable reference to it (wrap in a useMemo for example). Would you mind expanding your sample of code or creating a reproduction in a CodeSandbox?

[radekmie]

@mdesousa By default the AutoForm won't clean up the model if the model prop is the same (using isEqual from lodash). Can you make sure that it's the case?

[mdesousa]

That's our challenge @radekmie ... they won't be equal because the model comes from application state (we use ApolloClient, but similar to Redux etc.), which will have the "initial value" of the model until the graphql mutation completes and the application state is updated with the new value.
So while the mutation runs and rerenders are happening, we'd like to somehow tell the form to keep its current state until the application state reflects the changes.

So the overall workflow is, when the component is initialized:

1. Application state --> model --> AutoForm
2. Submit --> Mutation --> Application state

And the issue is dealing with re-renders that happen in #2 before the application state has been updated

[radekmie]

Ah, then it's controlled by an external state - that's nothing unusual. In that case, it doesn't make sense to use AutoForm - use ValidatedQuickForm (or ValidatedForm if you specify the content of it yourself). Then the piece of code you'll need to implement is the "merging" of local and server states. I've done that quite a few times already, and I can say that it's always different between usecases.

[mdesousa]

Interesting! Ok, taking a look at the ValidatedForm... is the best source for documentation?: https://uniforms.tools/docs/api-forms#validatedform
It sounds like it's not self-managed like AutoForm... I think that means that it's completely stateless, correct?
I added an onChange prop to the ValidatedForm. I was guessing that it would pass the model for any changes but its passing an array with the name of the field that change... do you happen to have any examples of how to implement a ValidatedForm?
It's sounding like we'll need to implement onChange for each field... sound right?

[radekmie]

I think that means that it's completely stateless, correct?

Yes, exactly. So the point is, you have to keep the model by yourself and use the onChange handler to update it respectively. And yes, onChange will tell you which field has changed, but not the next model. You can use this code of AutoForm to update the model in a non-mutating yet performant way.

It's sounding like we'll need to implement onChange for each field... sound right?

No, not at all. The only onChange you'll have to implement is the one on ValidatedForm.