What are the recommended use cases for Controller vs useController?

[cbdeveloper]

I read the documentation and went through the examples, but I'm still really confused.

About useController link:

About Controller link:

Question 1

So, if I'm creating a reusable controlled input on my own, I should implement it with useController and just pass the control prop that the consumer will get from the useForm() call, right?

Question 2

And what is the Controller for? Is it just to use it with 3rd party libraries?

Question 3

Is it always one OR the other? Is there any case where both would be used at the same time?

Question 4

I guess that this sentence made me confused: "This custom hook powers Controller". What does that mean?

[bluebill1049]

1. yes.
2. controller is more for a convenient way to inline wrap your component.
3. no, suits your own need, but I prefer the hook.
4. feel free to send a PR, if something you recommend to improve. the controller is basically a component version of the hook
   const Controller => useController()

[cbdeveloper]

Hey @bluebill1049 , thank you so much for your reply.

I'm still wrapping my head around some concepts and experimenting with some patterns. Later, I'll see if I can make some suggestions to improve the documentation. I'll send a PR if I come up with something nice.

[deannashih]

Hi! I was just looking up the differences between the two myself, so apologies for the delayed answer.

I also did find that while <Controller /> is much more efficient for fast prototyping/converting for multiple inputs, useController is necessary (or at least much easier to read) when you need to use a variable in an external handler that you can't otherwise retrieve within the scope of a <Controller />-rendered element.

e.g.

  const {
    field: { onChange: onChangeRole, value: valueRole },
  } = useController({
    control,
    name: 'role',
  });

function handleRoleChange() {
  // handle some sort of necessary side effect change here
  onChangeRole();
}

<Input
       {...props}
       name='role'
       value={valueRole}
      onChange={handleRoleChange}
 />

I suppose you could also invoke the wrapper handler inline within the <Controller />-rendered input but then it'd get entirely too messy, especially once variables of a bunch of other inputs get involved.

@bluebill1049 feel free to correct me if I'm wrong or if there is a better way to go about this!

[bluebill1049]

sounds good to me, useController is more of a reusable generic hook and pretty much powered the Controller component. Another important usage of useController is you can host your own state and then just collect data and validate with that hook.\

https://codesandbox.io/s/usecontroller-own-state-wncet2?file=/src/App.tsx

import * as React from "react";
import { useForm, useController, Control } from "react-hook-form";
import Headers from "./Header";
import "./styles.css";

type FormValues = {
  test: number;
};

let renderCount = 0;

const Input = ({ control }: { control: Control<FormValues> }) => {
  const { field } = useController({
    control,
    name: "test"
  });
  const [value, setValue] = React.useState(String(field.value));

  return (
    <input
      ref={field.ref}
      value={value}
      onChange={(e) => {
        field.onChange(parseInt(e.target.value, 10)); // send data to hook form
        setValue(e.target.value);
      }}
      onBlur={field.onBlur}
    />
  );
};

export default function App() {
  const { control, handleSubmit } = useForm<FormValues>({
    defaultValues: {
      test: 0
    }
  });
  const onSubmit = (data: FormValues) => console.log(data);
  renderCount++;

  return (
    <div>
      <Headers
        renderCount={renderCount}
        description="Performant, flexible and extensible forms with easy-to-use validation."
      />

      <form onSubmit={handleSubmit(onSubmit)}>
        <Input control={control} />
        <input type="submit" />
      </form>
    </div>
  );
}

which it's harder to achieve with Controller component, as useController is a lower level tool for you.