React-Final-Form delays in taking input with render props in Field

Question

I am currently working on a react project. I am using react-final-form for fetching the data in the form. As I am using the material UI component to create the form I am creating the form somewhat like this.

Code

 <Form
     onSubmit={onSubmit}
     validate={validate}
     render={({ handleSubmit, values }) => (
         <form onSubmit={handleSubmit}>
              <FormControl variant="outlined" className={classes.formControl} key={fieldKey}>
                     <Field
                        name={field.fieldName}
                        render={({ input }) => (
                           <TextField
                             {...input}
                             className={classes.textField}
                             variant="outlined"
                             label={props.field.label}
                             placeholder={props.field.description}
                             required={props.field.isMandatory}
                             InputLabelProps={{
                               shrink: true,
                             }}
                          />
                      )}
                      type="text"
                   />
                 </FormControl>
             </form>
          )}
      />

Now as soon as I remove the input props from the render props it is working fine. but with the input props, it delays in taking input. Without input props, I could not fetch the value from the form.

Is there any way to resolve this time delay?

Thanks in advance.

Answer 1

The solution to this is subscriptions. The form is initially rendered on every action, react-final-form allows to handle subscription,

<Form subscription={{handeleSubmit: true}} ...> </Form>

We can do somewhat like this

There is a video link for this. Video

Hope you find this helpful

Answer 2

If you want a simple field. Maybe you can pass on only essential props.

<TextField
  name={input.name}
  value={input.value}
  onChange={input.onChange}
/>