Final form subscription prevents values being passed as props to form

Viewed 232

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.

0 Answers
Related