reactjs - multiple re-reders in formik form of react

Question

this is my material ui + formik with yup validation form i have about 16 input fields like below i passed controls to each

 <Formik
          initialValues={initialValues}
          validationSchema={validationSchema}
          onSubmit={onSubmit}>
          {({ values, handleChange }) => (
            <>
              <div style={{ height: '10px' }}></div>
              <Grid container spacing={1}>
                <Grid item lg={2} md={3} sm={12} xs={12}>
                  <FormikControl
                    control='input'
                    label='Process'
                    name='process'
                    variant='outlined'
                  />
                </Grid>
                <Grid item lg={2} md={3} sm={12} xs={12}>
                  <FormikControl
                    control='input'
                    label='Sub-Process'
                    name='subProcess'
                    variant='outlined'
                  />
                </Grid>

**i get these props in file called FormikControl.js **

import React from 'react';
import CheckboxGroup from './CheckboxGroup';
import DatePicker from './DatePicker';
import Input from './Input';
import Select from './Select';
import TextArea from './TextArea';
const FormikControl = (props) => {
  const { control, ...rest } = props;
  switch (control) {
    case 'input':
      return <Input {...rest} />;
    case 'checkboxGroup':
      return <CheckboxGroup {...rest} />;
    case 'textArea':
      return <TextArea {...rest} />;
    case 'select':
      return <Select {...rest} />;
    case 'datePicker':
      return <DatePicker {...rest} />;
    default:
      return null;
  }
};

export default FormikControl;

input field given below here i pass errors in helpertext by formik mata and field also updating values

import React from 'react';
import CheckboxGroup from './CheckboxGroup';
import DatePicker from './DatePicker';
import Input from './Input';
import Select from './Select';
import TextArea from './TextArea';
const FormikControl = (props) => {
  const { control, ...rest } = props;
  switch (control) {
    case 'input':
      return <Input {...rest} />;
    case 'checkboxGroup':
      return <CheckboxGroup {...rest} />;
    case 'textArea':
      return <TextArea {...rest} />;
    case 'select':
      return <Select {...rest} />;
    case 'datePicker':
      return <DatePicker {...rest} />;
    default:
      return null;
  }
};

export default FormikControl; 

   

**on change of any input field re-renders about 36 time it made my form slow **

question from:https://stackoverflow.com/questions/65941935/multiple-re-reders-in-formik-form-of-react

Answer 1

Waitting for answers