is it possible to Watch an input only on BLUR ?

[SuperChuck83]

For performance, i would like to know if is it possible to watch an input only when onBlur ?
because for now when i watch an input the watch is triggered every time i add/remove a character !
THX

[bluebill1049]

nope at the moment with watch, its meant to watch every key change. consider useWatch, at least you can isolate render.

[RickRyan26]

Thanks and that's interesting! All of my input components are very custom; node modules + tailwind css + framer motion + my own logic.

Only one of my forms that uses them has any lag, but it is significantly larger than the rest.
We're talking 40+ smart inputs (including texts, textareas, files, checkboxes, radios, and selects), 7+ field arrays, and 2 conditionally nested field arrays.

Until today I didn't realize this kind of lag could be an issue, but it's one that I need to solve because these arrays will likely grow the total inputs to over 100.
Right now there seems to be about a half second delay between each keypress and the input updating it's value.
Also this new onBlur functionality is causing about a second delay between changing focus from one input to another.

Any thoughts you have around this will be greatly appreciated!
I assume my only option here is to break the form up into paginated sections; which also allows me to revert the form modes back to onChange.

[bluebill1049]

Do a comparison with native input first.

[RickRyan26]

Good plan! I'm starting to figure things out.

[RickRyan26]

Found a possible bug in the beta, had to revert to v7 to fix; hopefully this isn't too confusing.
I have field array that has a radio input inside it which, with the help of useWatch, conditionally register/reveals either a nested field array A or nested field array B.
Originally I had the problem where if I used 'swap' on the parent array when it looked like [A[...],B[... ]] , the input contents would be lost for obvious reasons; so I now register both nest A & B and just leave one or the other "hidden" which solves the problem.
This works because I can leave all the inputs in the hidden inputs as blank strings.
In the beta though, empty strings get swapped out with Undefined, and that crashes my firebase upload since firestore won't accept undefined fields.

Also using a wizard form, and onblur, has completely solved my lag issues; but passing data from form to form through useState has created an issue with my file uploads all of sudden. Firebase now sees them as functions so now I'm going to figure that issue out. Edit: Moving the file uploads to the final wizard form page solves this problem for now =)

[bluebill1049]

are you using the latest next?

[adi-works]

So, no solution? you can't pass { mode: 'onBlur' } to watch or useWatch. That API doesn't exist. It seems you can only pass mode to useForm, so what's the point? I want to react to changes on blur event only for some fields.

[Moshyfawn]

mode is the validation mode prop, not the value update subscription mode.

You can isolate the re-renders using the useWatch hook down in the component that needs to watch the value and wrap it with React.memo with the comparison function provided. But you might wanna compare the performance gains

[bluebill1049]

some use-cases are even easier just to attach onBlur on those inputs.

[Moshyfawn]

this ^

[adi-works]

Thanks for correcting that. I have a watch() handler that watches all my fields. When I register a field, I can pass an onBlur option, but this means I have to override the onChange option to be noop, which is kinda annoying and not declarative. Any solutions to that?

[adi-works]

Had to resort to this to get what I want:

<FilledInput
  {...register('name', {
    onChange: _.noop,
    onBlur: (event) => update({ name: event.target.value }),
  })}
/>

[RonaldShum]

I followed the suggestion on using onBlur instead of useWatch to handle logic while the input changes.

However, when I use setValue to fille the form for the user first, the onBlur does not trigger. (useWatch would detect setValue changes)

Is it possible to make setValue triggers onBlur on input?

[paulwongx]

To elaborate and clarify the comments above, this works...

const { setValue } = useForm({
  input1: "enter a value"
});

return (
  <input 
    onBlur={ (e) => setValue( "input1", e.target.value ) }
  />
)

The docs say it's best to register the input first before using setValue. I think this is done when setting the default value.

[ValkyrieWing]

Found another solution that have the ability to trigger onBlur on the element and useWatch hook by using <Controller> approach.
The approach is also still align with the hookForm flow which you still use the useWatch() on the onBlur only event.

import { Controller, useFormContext } from "react-hook-form";

function TestComponent(props: { listenType: "onChange" | "onBlur" | "all" }) {
  const hookForm = useFormContext();
  return (
    <>
      <Controller
        name={"name"}
        control={hookForm?.control}
        render={(renderProps) => {
          return (
            <>
              <input
 //# dont forget this spread 
                {...renderProps.field}
                onChange={(event) => {

//# the logic lies here
                  if (
                    props.listenType == "onChange" ||
                    props.listenType == "all"
                  ) {
                    renderProps.field.onChange(event.target.value);
                  }
                }}
                onBlur={(event) => {

//# the logic lies here
                  if (
                    props.listenType == "onBlur" ||
                    props.listenType == "all"
                  ) {
                    renderProps.field.onChange(event.target.value);
                  }
                }}
              />
            </>
          );
        }}
      />
    </>
  );
}