Comparison of defaultValues during useForm Initialization？

[matsu3m]

Following the changes introduced in #11143, our application now freezes when opening a form.

In our application, we receive binary data as a Uint8Array from the backend and pass it to useForm as defaultValues. Additionally, useForm returns isDirty. Since the aforementioned change, _getDirty uses deepEqual to compare the defaultValues, which contain identical data during the initialization of useForm. This results in a very heavy process due to the comparison of large, identical arrays, causing the application to freeze.

I have two questions regarding this:

1. Is it by design that useForm compares defaultValues to return isDirty during initialization?
2. Is it considered an anti-pattern to handle data such as Uint8Array with React Hook Form?

Thank you for your assistance.

Here is a sample code snippet:

import React, { useEffect, useState } from 'react';

import { SubmitHandler, useForm } from 'react-hook-form';

interface FormValues {
  name: string;
  file: Uint8Array;
}

interface ModalProps {
  defaultFile: Uint8Array;
  onClose: () => void;
}

function Modal({ defaultFile, onClose }: ModalProps) {
  const {
    register,
    handleSubmit,
    setValue,
    formState: { isDirty },
    watch,
  } = useForm<FormValues>({
    defaultValues: {
      name: 'default-name',
      file: defaultFile,
    },
  });

  console.log('isDirty: ', isDirty);

  const onSubmit: SubmitHandler<FormValues> = (data) => {
    console.log(JSON.stringify(data));
    onClose();
  };

  const handleFileChange = async (
    event: React.ChangeEvent<HTMLInputElement>,
  ) => {
    const file = event.target.files?.[0];
    const arrayBuffer = await file?.arrayBuffer();
    if (arrayBuffer) {
      const uint8Array = new Uint8Array(arrayBuffer);
      setValue('file', uint8Array, { shouldDirty: true });
    }
  };

  return (
    <div className="modal">
      <form onSubmit={handleSubmit(onSubmit)}>
        <input type="text" {...register('name')} />
        <input type="file" onChange={handleFileChange} />
        <button type="submit">Submit</button>
        <button type="button" onClick={onClose}>
          Close
        </button>
      </form>
    </div>
  );
}

function ParentComponent() {
  const [defaultFile, setDefaultFile] = useState<Uint8Array | null>(null);
  const [isModalOpen, setIsModalOpen] = useState(false);

  useEffect(() => {
    const fetchDefaultFile = async () => {
      const response = await fetch('../test.jpeg');
      const arrayBuffer = await response.arrayBuffer();
      setDefaultFile(new Uint8Array(arrayBuffer));
    };

    fetchDefaultFile();
  }, []);

  const openModal = () => setIsModalOpen(true);
  const closeModal = () => setIsModalOpen(false);

  return (
    <div>
      <button onClick={openModal}>Open Modal</button>
      {isModalOpen && defaultFile && (
        <Modal defaultFile={defaultFile} onClose={closeModal} />
      )}
    </div>
  );
}

export default ParentComponent;