[v7] Introduce a useField hook

[knowler]

I understand in v7 the new register API requires it to be spread on the form control element. This is problematic for us since we use the ref as a prop pattern instead of the forwardRef pattern to expose refs from the underlying form controls in our UI library (e.g. our ref prop is called inputRef — the decision was related to a technical limitation we experienced with the latter pattern). I have tried to call register before the render and attach the resulting ref and other props manually, however, this doesn’t work (see error details below).

Uncaught TypeError: path is undefined Related code and stack trace

// This example is contrived for the sake of clarity. It doesn’t reflect our actual form control usage.
function App() {
  const {handleSubmit, register} = useForm();
  const {ref, ...props} = register('firstName');
  
  return (
    <form onSubmit={handleSubmit(values => console.log(values)}>
      <Input inputRef={ref} {...props} />
    </form>
  );
}

react-hook-form/src/utils/get.ts

Line 6 in a96ab39

const result = compact(path.split(/[,[\].]+?/)).reduce(

react-hook-form/src/useForm.ts

Line 893 in a96ab39

_f: {

This leaves me with only one solution: refactor all my form control components to use the forwardRef pattern. I’m not against this, not only does it feel more "proper" and interoperable, it will just be a lot of work 😅 and there are less important, but valuable DX features that I will need to sacrifice.

I wonder if I am the only person who uses this library with the ref as a prop pattern instead of forwardRef and, if I am not, if it would be worth exploring an extended API. That API would be a hook called useField. The function signature would be identical to register (you could even call it useRegister to signify this), but it would allow one to manually connect their components if their props API differed. Here’s how I’d use it:

// This is a simplified example of how I’d use the proposed hook in my app
function TextField({name, ...inputProps}) {
  const {ref, ...rhfProps} = useField(name);
  
  // This Input component represents a number of different components coming from a UI library which use the ref as a prop pattern
  return <Input type="text" inputRef={ref} {...rhfProps} {...inputProps} />;
}

function App() {
  const {handleSubmit} = useForm();
  
  return (
    <form onSubmit={handleSubmit}>
      <TextField name="firstName" />
      <TextField name="lastName" />
    </form>
  );
}

I’m not sure if this would defeat the purpose of what you are trying to provide by spreading the register, but I thought I’d bring it up to see if there would be any possible way for this to be added to v7. Otherwise, again, I am fine with refactoring my components.

[bluebill1049]

that's useController :)

[bluebill1049]

https://react-hook-form-website-git-v7-bluebill1049.vercel.app/api/usecontroller

[knowler]

Using that would mean everything would become controlled components, correct?

[bluebill1049]

yes