Controller with useFieldArray re-rendering all fields

[lokeshk12510]

React Hook Form works perfectly with normal input fields, but when we use MUI TextField inside Controller it is re-rendering for each time when append, delete, and other useFieldArray methods are triggered.

When we comment the fieldState prop it will not cause any issue but the form needs the error prop

I tried with both Controller and useController gives the same result.

### I want these text fields not to re-render when adding, or deleting rows like the normal input.

https://codesandbox.io/s/react-hook-form-with-usefieldarray-up60vy
Click this link and open the preview in a separate tab and select Highlight updates when components render in react devtools settings, to view the unwanted re-rendering.

Using Normal Input
<input {...register(`test.${index}.sno`)} />

Using Controller

 <Controller
      render={({
        field
        //  fieldState: { error } <--- here
      }) => <TextField {...field} sx={{ background: "#fff" }} />}
      name={name}
      control={control}
    />

Using useController Hook

const {
    field: { onChange, onBlur, value, ref }
    // fieldState: { invalid, isTouched, isDirty, error }, <--- here
  } = useController({
    name,
    control,
    rules: { required: true },
    defaultValue: ""
  });

  return (
    <TextField
      sx={{ background: "white" }}
      onChange={onChange} // send value to hook form
      onBlur={onBlur} // notify when input is touched/blur
      value={value} // input value
      name={name} // send down the input name
      inputRef={ref} // send input ref, so we can focus on input when error appear
      error={error}
    />
  );

@bluebill1049

[leapful]

@lokeshk12510 : Could you please share video of highlighting updates with normal inputs that is working perfectly as your expectation and then the video with MUI TextField ?

I've tried with MUI TextField in your codesandbox with formState error and without formState error but it looks like the same to me.

[lokeshk12510]

Hi @leapful ,

Thank you for your reply.

I have tried different input register methods, comment and uncomment fieldState on every component and add or delete rows to see the difference.

Note: In my project which has a dynamic table with 20 columns and 120+ rows of input fields, when I add a new row, every input field is re-rendering causing performance lag.

First column has Normal Input Field
Second and fourth column Input is created with Controller
Third column Input is created with useController hook

First clip is when using Controller with fieldState

<Controller
render={({
field,
fieldState: { error } <- uncommented code
}) => <TextField {...field} sx={{ background: "#fff" }} />}
name={name}
control={control}
/>

current_result.mp4

Then, Second clip is without using fieldState with Controller
<Controller
render={({
field
// fieldState: { error } <--- here commented
}) => <TextField {...field} sx={{ background: "#fff" }} />}
name={name}
control={control}
/>

expected_result.mp4

[leapful]

@lokeshk12510 : Your custom Controller component (like ControlledInput, ControlledInput2, InputField) is watching on field state to perform a re-rendering if there is an error related to its field.

When using native <input> element, there is no prop change to trigger re-rendering on the input itself therefore no re-rendering shown in React Developer Tools but with MUI TextField, each time the custom Controller component re-render, <TextField> will receive a brand new defined props and trigger the change on itself.

You can apply React.memo on MUI TextField or any MUI field to check equals only on the props that might be changed over time like "value", "error", ... to avoid re-rendering.

Working demo for ControlledInput2: https://codesandbox.io/s/react-hook-form-with-usefieldarray-forked-lmvjei?file=/src/components/ControlledInput2.jsx

[lokeshk12510]

@leapful : In your demo CSB Even after using React.memo in the fields, you can see the ControlledInput2 field rendering every time.

https://codesandbox.io/s/react-hook-form-with-usefieldarray-forked-5tmoxv?file=/src/components/ControlledInput2.jsx

After your suggestion ->

optimized_code.mp4

[leapful]

@lokeshk12510 : The new "optimized_code.mp4" is now having same behavior with your "expected_result.mp4", is what you want to achieve, right ? Now MUI TextField has no more highlight updates.

Please note that your ControlledInput2 or ControlledInput1 or InputField is being rendering in a for loop of "fields" from "useFieldArray" therefore it always be re-rendered when append, prepend, remove or move as the whole "fields" value is changed.

[lokeshk12510]

@leapful : As you said when looping from useFieldArray every input field under for loop will re-render, Ok then why this description field is re-rendering when adding a new row?

Demo link : https://codesandbox.io/s/react-hook-form-with-usefieldarray-forked-5tmoxv?file=/src/App.js

useFormState.mp4

const { errors } = useFormState({ control });

<input
          {...register(`test.${index}.sno`)}
          className={errors[`test.${index}.sno`] && "error"}
        />

Also, in our first comment, you said the native input field is not watching formState, So it was not re-rendered. But now I have used the useFormState to get errors object, Still, the native input field is not highlighted.

[leapful]

@lokeshk12510 : It seems you are misunderstanding re-rendering of React component with react-hook-form and also how highlight updates on React devtools works.

when looping from useFieldArray every input field under for loop will re-render, Ok then why this description field is re-rendering when adding a new row
=> Whenever the "fields" from "useFieldArray" changes (append, prepend, move, remove, ...), it will trigger a re-rendering on App.js (where hook "useFieldArray" is called) therefore your new <ControlledInput2 name="desc" control={control} /> also re-rendered. This is how React Functional component works with hooks.

Also, in our first comment, you said the native input field is not watching formState
=> I'm not saying "native input is not watching formState" but I said there is no prop change to trigger re-rendering on the input meaning after being "reconciliation" (the diffing algorithm of React Virtual DOM), no prop change but then it will not trigger real DOM change.

But now I have used the useFormState to get errors object, Still, the native input field is not highlighted.
=> Native input is not a React component, React devtools only highlights updates on React component. If you wrap a React.memo for <input />, it will be highlighted too. The reason is simple , even React.memo is used to avoid re-rendering, React still needs to perform diff first on React.memo to check if there is any change on it.

[1010nishant]

It always rerenders whenever we use useFieldArray and loop input fields using the fields property from useFieldArray, correct?

[lokeshk12510]

@leapful : Thank you for your reply.