got some really poor performance in a relatively large form

[jackielii]

So the shape of my form is like this:

{
  subarray: [{
    name,
    checkbox1,
    checkbox2,
    ...
    checkbox8,
  },
  ... // 46 rows
  ]
}

so there are 368 checkboxes displaying.

I've got relative good performance in most interactions except one. To show my interactions, I'll start with a screenshot:

Interactions:

1. click on any checkbox sets a nested value of subarray[index].checkbox?
2. calculate column checkbox status: none checked / indeterminate / checked
3. when click on the first row of checkboxes, set all of the checkboxes in this column to checked or not checked. This is the problematic bit

My approach is roughly like below:

1. register all fields manually
2. watch fields individually and add onChange to call setValue

const Cell = () => {
      const formMethods = useFormContext()
      const { setValue, control } = formMethods
      const key = `fieldsList[${index}].${field}`
      const value = useWatch({ name: key, control })
      return (
        <Checkbox
          checked={value}
          onChange={(_e, value) => {
            setValue(key, value)
            PerformanceHack(formMethods)()
          }}
        />
      )
}

the PerformanceHack there is to set the form dirty, because I can't set dirty on the key inside the checkbox onChange, it'll trigger re-render of all the checkboxes. Related code:

const PerformanceHackKey = '__internal_performance_hack'
const PerformanceHack = ({ setValue }: PartialRequired<UseFormMethods, 'setValue'>) => () =>
  setValue(PerformanceHackKey, PerformanceHackKey, { shouldDirty: true })
...
// somewhere in the main component: 
  useEffect(() => {
    register(PerformanceHackKey)
  }, [register])

This works fairly well, only the components I think should be updated are updated. However the checking / unchecking whole column is extreamly slow, >3 seconds without throttling

profiling react components gives me little information as most components did not render at all:

However, using the profiling tool from Chrome reveals there's a lot of time spent on some functions within react-hook-form: (4x cpu throttle applied this below screen capture)

Am I taking the right approach? or is there any room for optimisation inside the react-hook-form lib?

Thanks & Regards,

[bluebill1049]

where is the codesandbox?

[jackielii]

https://codesandbox.io/s/crazy-cohen-ttg5s

Tried to simplify as much as possible. Please let me know if you'd like it simplified further.

[jackielii]

Hi @bluebill1049 I see you have looked into this: 3a275dd

I ran a benchmark on master, looks like it's about 1.5 seconds faster. However it's still quite slow. We've eliminated the stringToPath call from the top of the call graph. But we're still spending a lot time in function call transformToNestObject, getFieldsValues. Here is the new profiling screenshot:

[bluebill1049]

That PR was not meant to fix your perf issue, that was something I wanted to improve for a while.

here is CSB with a lot more components than your example: https://y0gjq.csb.app/

The question is why transferNestedObjected gets invoked? I think you probably missing report the information detail
above, check the individual checkbox was not the problem here:

when clicking the checkbox which is already been checked column

when clicking on the parent column

• when you first check the first checkbox to indicate the checkbox is column is been checked
• when you check the group icon on the checkbox to check the entire column

the problem is on the screen there are about 539 cells, and convert them into a nested object is the bottleneck for the perf. I believe is when you click on the parent checkbox to check all of the child nodes, and first time check one of the nodes to show the parent node.

I will do some more play around with this problem.

[bluebill1049]

This is definitely the issue, it's basically doing getValues twice,.

[bluebill1049]

with getValues() * 2 (with 500 plus cells) this is the reason why. i would recommend investigating for a fix there.

[jackielii]

That's the approach I used in the beginning, the problem with that is every click on any checkbox triggering re-render of the entire table, and that's even slower.

So my early conclusion is react-hook-form is faster than React ;)

[bluebill1049]

what about doing this instead?

const dataRef = useRef({});
dataRef.current = useWatch({ control }) // watch entire form
// next render if dataRef.current is not {} then just read from the value.

// after click reset 
dataRef.current = {};

[jackielii]

Hmm, I don't follow. The things is I want react-hook-form to tell me what to re-render, setting the data to a ref doesn't really solve the problem...

e.g. when I click on the "checkall" of a column, I'd like the useWatch to re-render only the individual checkboxes.

What you suggest there if I understand correctly is the useWatch will trigger, and I pass the values to the table, and then in each checkbox I check if value is changed? This is essentially a re-render right?

[bluebill1049]

hmmm you are right...

[bluebill1049]

i forgot the part of re-render.

[Aaronius]

We're running into something similar. The number of fields in our form is rather large (several hundred fields), though we only render a few fields at a time.

It looks like this:

Selecting an item in the tree on the left presents different fields on the right.

We have one useWatch usage. Every character press takes ~100 milliseconds to render. It appears that the majority of that time is stuck in getFieldsValues as a result of onChange being called and the useWatch.

We're in the process of converting from Formik, which didn't have this particular performance problem.

[bluebill1049]

can you share your usage with useWatch and onChange?

[bluebill1049]

also provide a CSB if possible, so I can investigate on it.

[bluebill1049]

hey Aaronius, can you try with this beta version, see if that will improve the perf. still would be good to know the usage. [email protected]

[Aaronius]

Sorry @bluebill1049 , but we ran into too many issues with React-Hook-Form and reverted back to Formik (#5159 being the biggest problem).

[bluebill1049]

That's all good. That issue was been addressed recently as well, but honestly if formik is working for ur project, don't make the switch.