I inherited a complicated form that has a lot of subcomponents and nested Field-Array components, and I want to improve the performance of a particular field that is very slow. I saw you can use subscriptions to improve performance and added subscriptions to my and a lot of relevant components.
<Form
initialValues={sanitizeInitialValues(
plugin.staging,
mappers,
plugin.plugindef,
)}
onSubmit={this.submit}
subscription={{ submitting: true }}
mutators={{ ...arrayMutators }}
render={({
handleSubmit,
form: { reset, change },
dirtyFields,
values,
}) => {
return (
<div>
<div>
<Button
onClick={() => {
change(dirtyFields);
handleSubmit();
}
/>
}
/>
</div>
<FormTabs
values={values}
modified={dirtyFields}
/>
</div>
);
}}
/>
However, the form breaks unless I add all the props passed to the form render() function to the subscription.
subscription={{ submitting: true, values: true, dirtyFields: true }}
This runs but of course doesn't prevent the from re-rendering on every key change in my trouble field. How can I add subscriptions without breaking the form? Any suggestions welcome.