useController

Controlled Componentsなformをreact-hook-formで管理する時に使う

RHFのControllerかuseControllerかのいずれかを使うことになる

RHFに依存しないFieldがある時に、

useController + FieldのComponentを新たに定義して、それを簡易に使うか、

code:ts

const Wrap = () => {

const {} = useController()

return <Textarea/>

}

code:use.ts

<Form>

Controller + Fieldを毎回呼ぶかの差か

code:use.ts

<Form>

<Controller

render={() => <Textarea/>}

まあ後者で良くない？という気はするmrsekut.icon

デメリットは、Controllerを逐一呼ぶのでuse内の行数が嵩張る

メリットは、

Provider使っている時のcontrolの省略

不要なComponent定義が増えない

パフォーマンス観点でも後者のほうが少しマシ

使っている例 ref

code:ts

export const RhfTextArea = <T extends FieldValues>(props: RhfTextAreaProps<T>) => {

const { name, control, placeholder, className } = props;

const {

field: { ref, ...rest },

formState: { errors },

} = useController<T>({ name, control });

return (

<Textarea

inputRef={ref}

className={classNames(formControlStyles.formInput, formControlStyles.formTextArea, className)}

placeholder={placeholder}

{...rest}

error={errorsname && ${(errors[name] as DeepMap<FieldValues, FieldError>).message}}

);

};

こういう風に書くと、FormProvider使用時に、control省略できる嬉しさは消えちゃうなmrsekut.icon

これのメリットって呼び出す時に、

<Controller render={() => <Textarea/>}/>とごちゃごちゃ書かずに、

<RhfTextarea .. />とスッキリ書ける

ぐらいしか無いと思う