MUI Select box inside react hook form useFieldArray problem

Question

I am doing a personal project and need your help with this. I don't know how to approach problems without having performance issues. I think the issue is because of my lack of understanding of some parts of react-hook-form even react itself so that's why I need your help

Requirement and Problem Description:

In the project, I have created a reusable/separate MUI select box component which I am using inside useFieldArray. The requirement is that Inside this list I am not allowed to have the same option selected twice. In this case, when the option is selected for some upper array element, I can not be able to select it again.

The list of options inside the select box came from an external API and the only way to know what is already selected is to take a look at what is inside useFieldArray.

My approach, which you can see in CodeSandbox is causing me performance issues while every time I select something, the entire form is re-rendered. I have an example with 40 elements in useFieldArray and more than 100 options to select. When I click on any available option in the select box it will update the entire form and the experience becomes laggy.

How to reproduce:

• Open CodeSandbox Example
• Click on one of the select boxes and choose an available value
• Watch the console log that I am longing from SelectComponent and also TextInputComponent

Some remarks:

• implementation behind useWatch inside the Select component is better implemented in real code, this is just an example
• IMPORTANT: I used useWatch to solve this, I am not even sure that I am on the right way in here, so that's why this question and my search for help.

Also worth mentioning:

• in my project, I am using RHF v7.45.4
• I am also using ZOD for validation which I did not include in the CodeSandbox example just for simplicity. I presume it is not causing performance issues.

Conclusion: Any help is more than welcome, as well as a change in perspective and using another approach.

CodeSandbox: https://codesandbox.io/s/priceless-greider-2kc6xy

EDIT:

I just updated my example with more select options and more initial data. Just try to delete the first item in the list. The lag is pretty noticeable.

Actually, now I realise that even without a useWatch the decrease in performance is the same. So it has to be something about the usage or implementation of MUI Input fields.

Answer 1

useWatch potentially result in better performance than watch.

I think it's the right way to use useWatch.