[FIXED] How to improve react form performance (with formik)?

Issue

In a formik form with many inputs (like 40 fields), I can see that the form is slow.

This is my formik configuration :

const formik = useFormik({
        enableReinitialize: true,
        initialValues: contractor,
        validateOnBlur: true,
        validateOnChange: false,
        validateOnMount: true,
        validationSchema: // YUP validation here
      });

This is how I define fields :

    <TextField
      variant="outlined"
      fullWidth
      id="No"
      name="No"
      label="No"
      value={formik.values.No}
      onChange={formik.handleChange}
      onBlur={handleSubmit}
      error={Boolean(formik.errors.No)}
      helperText={formik.errors.No}
/>

Is react bad for handling huge forms? How can I improve formik performance? What i'm doing wrong?

Thank you !

Solution

Try to run the app on production enviroment. "using create react app and semantic ui i built ~40 fields. input is very slow whilst running the app in dev mode. but when i run yarn build and run the app with serve -s build, there is no delay in input fields."

taken from this issue, take a look i think it'll be very helpful. https://github.com/jaredpalmer/formik/issues/671

Moreover, sometimes it's not only about formik and the high number of fields only, sometimes it's about performance, maybe there are unexpected re-renders that take a long or a huge calculation that can cause this kind of latency/performance issue. I suggest trying with react dev-tools extension, and figuring out if the is any laggy component or any calculation that is responsible for that situation.

react docs - react dev-tools : https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html

Answered By - LironShirazi
Answer Checked By - - Senaida (ReactFix Volunteer)