react-hook-form provides a syntax that I've never seen before, I would like to know the name of that

Question

I would like to know what syntax this is:

<input {...register("name")} />

Answer 1

The register method helps you register an input field into React Hook Form so that it is available for the validation, and its value can be tracked for changes.

To register the input, we’ll pass the register method into the input field as such:

<input type="text" name="firstName" {...register('firstName')} />

https://blog.logrocket.com/react-hook-form-complete-guide/

Answer 2

That register('fieldName')function returns all the props that can be passed to your field element. So in case of input, it is returning name, value, onChange/onBlur/onFocus and more (depends on how you configure them based on mode given to useForm).

If you want to see these before passing to your input field, you can do so.

const fieldProps = register('firstName');
console.log(fieldProps);
<input {...fieldProps}/>

Answer 3

react-hook-form provides a register method which returns an object with fields onChange, onBlur, name, and ref. You can see register method type is described as

register: (name: string, RegisterOptions?) => ({ onChange, onBlur, name, ref })

In order to connect your input control to react-hook-form you have two options. Either you use shorthand method

<input {...register('firstName')} />

Internally what it will do is this:

<input 
  onChange={onChange} 
  onBlur={onBlur} 
  name={name}
  ref={ref}
/>

Or you can manually take the return value from register method and add it to your input control like below:

const { onChange, onBlur, name, ref } = register('firstName'); 
        
<input 
  onChange={onChange} // assign onChange event 
  onBlur={onBlur} // assign onBlur event
  name={name} // assign name prop
  ref={ref} // assign ref prop
/>

... are called spread attributes which, as the name represents, it allows an expression to be expanded. You can learn more about that here

Answer 4

From the useForm documentation: https://react-hook-form.com/api/useform/register/

const { onChange, onBlur, name, ref } = register('firstName'); 
// include type check against field path with the name you have supplied.
        
<input 
  onChange={onChange} // assign onChange event 
  onBlur={onBlur} // assign onBlur event
  name={name} // assign name prop
  ref={ref} // assign ref prop
/>
// same as above
<input {...register('firstName')} />

This is called object destructuring. You can learn more about it here:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Explanation

The input element has many properties, like onChange, onBlur, name, ref... etc.

And the register function, when called by passing an argument, returns all of these properties that I've mentioned above.

So, this:

const { onChange, onBlur, name, ref } = register('firstName');

Creates four variables (const) that can be used later in my element

<input 
   onChange={onChange}
   onBlur={onBlur}
   name={name}
   ref={ref}
/>

Now, let's say that I had a function that printed all of the values that register('firstName') had.

const printFunction = (onChangeParameter, onBlurParameter, nameParameter, refParameter) => {
    console.log(onChangeParameter, onBlurParameter, nameParameter, refParameter)
};

But I don't want to call it extracting each variable at a time and then putting it in the function (like this):

const { onChange, onBlur, name, ref } = register('firstName');
printFunction(onChange, onBlur, name, ref);

So I can just DESTRUCTURE register('firstname') inside the function.

printFunction(...register('register'));

And essentially get the same result, but much quicker.

This is what is happening in the input element. You're calling a function that returns multiple things, and grabbing each of those things and putting it into the input element.