Feature Request: Add Middleware Support

[dvenomb98]

I’d like to propose adding a middleware feature to useForm.

The API could look like this:

const methods = useForm({
  middleware: (values) => {
    // modify values here
    return values;
  },
});

What it would do

This middleware would run on onChange events, allowing developers to modify form values directly before they are stored.
Essentially, it acts as a central place to intercept and transform values in real time.

Current alternatives

1. Using Side Effects

const [name, surname] = watch(["name", "surname"]);

useEffect(() => {
  const isSameValue =
   name === surname

  if(isSameValue) resetField("otherValue")
  
}, [name, surname]);

Downsides:

React discourages relying on side effects for this kind of logic.
Multiple useEffects in one form can become unpredictable and hard to maintain.

2. Modifying Values Directly in onChange

This works fine for simple cases.
However, when the same transformation logic needs to run across multiple fields, it quickly becomes messy.

const [name, surname] = watch(["name", "surname"])

<input
  {...register("name")}
  onChange={(e) => {
    const value = e.target.value
    setValue("name", value)
    if(value === surname)  resetField("otherValue")
  }}
/>

<input
  {...register("surname")}
  onChange={(e) => {
    const value = e.target.value
    setValue("surname", value)
    if(value === name)  resetField("otherValue")
  }}
/>

Note: In real-world applications, this logic can easily grow to 100+ lines of code and needs to be reused across multiple onChange events. Without middleware, this results in duplication and harder-to-maintain code. A middleware hook would allow centralizing this logic in one place, improving both readability and maintainability.

Developers often end up writing their own internal “middleware” layer anyway, or fall to useEffects, which could be simplified if the feature was supported natively.

Here is where middleware solution could come in.

const form = useForm({
  middleware: (values) => {
  
   // it can really be any value, i use placeholder DEFAULT_VALUE
  const otherValue = values.name === values.surname ? DEFAULT_VALUE : values.otherValue
  
   return { ...values, otherValue};
  },
});

This pattern can be also found at different form libraries. For example: TanStack Forms

Closing Thoughts

I think middleware could make react-hook-form more powerful, predictable, and easier to maintain in real-world forms.

Instead of duplicating logic across multiple onChange handlers or relying on useEffect side effects, we would have a single declarative place to transform values before they are stored.

👉

• What do you think about this idea?
• Is there an existing pattern that already solves this more elegantly?

I’d be happy to provide more concrete examples or even try a PR if the feature sounds like a good direction.