Proper way to handle dirtyFields when using useFieldArray?

[sampain]

Hi,

I have a form where I'm using useFieldArray. This form also contain an unrelated input that I have to detect separately if it is dirty or not.
!!dirtyFields.movie is working fine until I click on append (or any of the other buttons) because dirtyFields.movie is now an array with all of its properties. I don't get why useFieldArray is messing with this field.

https://codesandbox.io/p/sandbox/react-hook-form-usefieldarray-forked-hysfn9

I have found an issue about it (#11402), but it doesn't mention what should be done to properly handle that.

[rayanakarthikeyan]

!!dirtyFields.movie checks whether an entry exists, not whether a nested field inside it is dirty. For an array/object value, those are different questions.

I reproduced this with movie as an array of objects and an unrelated useFieldArray. On RHF 7.60.0, appending a row produced:

// getValues('movie') is unchanged
dirtyFields.movie = [{ id: false, title: false }];

!!dirtyFields.movie; // true: the array itself is truthy

Field-array operations can recalculate the form's dirty-field structure, including unrelated fields. This does not necessarily mean their values changed. The 7.60.0 implementation compares the leaves against defaultValues and can retain false leaves.

For your separate movie-dirty flag, check for an actual true leaf:

function hasDirtyLeaf(value: unknown): boolean {
  if (value === true) return true;
  if (Array.isArray(value)) return value.some(hasDirtyLeaf);
  if (value && typeof value === 'object') {
    return Object.values(value).some(hasDirtyLeaf);
  }
  return false;
}

// Read dirtyFields during render so RHF subscribes to its updates.
const { dirtyFields } = formState;
const isMovieDirty = hasDirtyLeaf(dirtyFields.movie);

This handles both a direct boolean and a nested object/array, including a tree whose leaves are all false. If the field is a scalar boolean entry, dirtyFields.movie === true is sufficient.

Also provide the initial movie value in useForm({ defaultValues: ... }), alongside your field-array defaults. The maintainer's reply on the issue you linked explains that dirtiness is measured against that form-level baseline. If the initial data arrives later, reset(data) can establish it; don't call it merely to hide dirty flags after each append.

In my minimal reproduction, 7.90.0 omits the unchanged movie entry after append. Retesting on a newer version may help, but checking the boolean leaves also works with the older representation.

AI-assisted verification: tested append, remove, editing movie, and restoring its default with React 19.3.1 and RHF 7.60.0/7.90.0. The linked sandbox was inaccessible, so these checks used a separate minimal reproduction rather than your exact project.

[ZohairShakir]

The important distinction here is between tracking whether the entire movie object is dirty and tracking whether one specific input inside it has changed.

When useFieldArray modifies a nested array, React Hook Form may update the dirty state of the parent structure. That means !!dirtyFields.movie is not a reliable way to check whether only your unrelated input changed.

If the input is something like movie.title, you can compare that specific value against its original default:

const { getValues, formState: { defaultValues } } = useFormContext();

const titleChanged =
  getValues("movie.title") !== defaultValues?.movie?.title;

For reactive updates, consider useWatch for that specific field:

const title = useWatch({
  control,
  name: "movie.title",
});

const titleChanged = title !== initialTitle;

Alternatively, if your unrelated input is currently nested under the same movie structure as the field array, consider whether it makes sense to separate their form paths.

One thing I'd check in your CodeSandbox is whether the issue is simply the parent dirtyFields.movie being marked dirty or whether the actual unrelated leaf field is incorrectly marked dirty too. Those are two different problems.

If the leaf field is changing unexpectedly, that would be worth reproducing against the latest React Hook Form version.