An extension of react-hook-form's `useFormContext`

useAugmentedFormContext.ts

import _ from 'lodash'
import { useRef } from 'react'
import {
  FieldError,
  FieldPath,
  FieldValues,
  useFormContext,
} from 'react-hook-form'
import { DistributivePick } from '../typescript/DistributivePick'

export type FieldState = {
  invalid: boolean
  isDirty: boolean
  isTouched: boolean
  error?: FieldError
}

export const useAugmentedFormContext = <TFieldValues extends FieldValues>() => {
  const methods = useFormContext<TFieldValues>()
  const dirtyRegistryRef = useRef<Record<string, boolean | undefined>>({})

  const getValues = <TFieldName extends FieldPath<TFieldValues>>(
    names: TFieldName[]
  ) => {
    const values = methods.getValues(names)
    const obj = _.zipObject(names, values)
    return obj as DistributivePick<TFieldValues, TFieldName>
  }

  const getFieldStates = <TFieldName extends FieldPath<TFieldValues>>(
    names: TFieldName[]
  ) => {
    const fieldStates = {} as Record<TFieldName, FieldState>
    for (const name of names) {
      fieldStates[name] = methods.getFieldState(name)
    }
    return fieldStates
  }

  const isOrWasDirty = <TFieldName extends FieldPath<TFieldValues>>(
    name: TFieldName
  ) => {
    const { isDirty } = methods.getFieldState(name)
    if (isDirty) {
      dirtyRegistryRef.current[name] = true
    }
    return dirtyRegistryRef.current[name] ?? false
  }

  const isOrWasAtLeastOneDirty = <TFieldName extends FieldPath<TFieldValues>>(
    names: TFieldName[]
  ) => {
    const dirtyValues = names.map((name) => isOrWasDirty(name))
    return dirtyValues.some((dirty) => dirty)
  }

  return {
    ...methods,
    getValues,
    getFieldStates,
    isOrWasDirty,
    isOrWasAtLeastOneDirty,
  }
}

One may also avoid importing lodash by using:

const zipObject = <T>(keys: PropertyKey[], values: T[]): Record<string, T> =>
  Object.fromEntries(keys.map((key, index) => [key, values[index]]))