無駄なレンダリングなしで submit できる react-hook-form

React でフォーム画面を作るときに便利だった react-hook-form のメモ。

親コンポーネント

import React from 'react';
import { useForm } from 'react-hook-form';
import D from './D';
import E from './E';
import F from './F';

const C = () => {

  const { register, handleSubmit, watch, errors } = useForm();

  const onSubmit = (data) => {
    console.log(data); // submit時のフォームの値が入っている
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Button type="submit">送信</Button>

      {/* 子コンポーネント */}
      <D name="name" register={register} />
      <E name="mail" register={register} />
      <F name="open" register={register} />
    </form>
  )
}
export.default C;

子コンポーネント

import React from 'react';

const D = props => {
  return (
    <input type="text" name={props.name} ref={props.register} />
  )
}
export.default D;