React-hook 表单从 isSubmitting 转换为 isSubmitted state 需要 5 多秒。 如何减少这种延迟以提高性能？

Question

I have written a form which has more than 30 fields(material-ui components) using react-hook form. All of the fields have different kinds of validation depending upon the type of the field.

The sample folder structure is as shown in this link. folderStructure

detail_page.js is the root component. In this component useForm is initialized with defaultValues. And the form is wrapped with FormProvider(Context to pass to the deeply nested components). Also handleSave method is written in this component only. Upon clicking SAVE button, handleSubmit(handleSave) is called. From this component TopLevel(top_level.js) component is called.

top_level.js file groups fields(passed as props from detail_page.js) into sections. A render method( renderSections ) is written to display each section in mui-accordion, and all the fields within that section is passed to iterator.js file. the renderSections method is memoized with the dependency array of sectionobjects.

iterator.js file loops through each of the the fields passed as props from top_level.js and calls respective system_component based on the type of the field (Radio,checkbox,textbox,textarea,email,password,file_uploader,address,latlong,phone_number,list,date,date_range etc).

system_component is the actual component which wraps the material-ui's component using useController/Controller. Based on the type of field, respective system_component is called in iterator. for eg:-

• SystemTextBox for type input
• SystemEmail for type email in input
• SystemDate for type date and so on.

Some system component may be a combination of 2 or more mui's components. for eg -SystemLatlong- combination of 4 or more text inputs and number input to display address components of the particular latlong.

• SystemArray - any combination of rest of the system components(calling iterator again for this purpose) and so on.

Now the problem is, whenever I click on save button, the save button freezes, In handleSubmit method I am setting MuiBackdrop component to display "Saving" text. This backdrop is called after 5+ seconds upon clicking save button. In detail page I have consoled isSubmitting, isValidating, isSubmitted state of formState. I figured out that, for almost 5+ seconds isSubmitting state holds true value, until which handleSave function is not triggered.

Answer 1

the reason for this is that react-hook-form uses context which is not optimized for performant re-renders. With context all consumers of that context will re-render regardless of if they care of the value that changed. With react hook form having one central context every input re-renders when isSubmitting is changed unfortunately.

I'm building a library that will solve this issues that is currently in beta called @zerry/react-formz . It guarantees isolated re-renders for inputs which means near constant performance no matter how many inputs you are rendering.

Its' in beta and currently being worked on but it might solve the issues you are having.

You can check it out here if you feel so inclined: https://react-formz.zerry.dev/docs/performance/

import {
  Form,
  TextField,
  NumberField,
  DependentTextField,
} from "@zerry/react-formz";

const NestedInput = () => {
  return (
    <TextField
        required
        name="name"
        as={({ input }) => <input {...input} />}
    />
  )
}

const MyForm = () => {
  return (
    <Form initialValues={{ name: "", age: "" }}>
      <NestedInput />
      <NumberField
        required
        name="age"
        as={({ input }) => <input {...input} />}
      />
    </Form>
  );
};