React Hook Form EP.1

วันนี้เราจะมาพูดถึง React Hook Form เป็นหนึ่งใน Library ที่ใช้ในการ Form Validation ร่วมกับ React ซึ่งเป็น Library ที่ใช้ในการพัฒนาเว็บไซต์อย่างแพร่หลายในปัจจุบันนี้ ที่เราเลือกมาเพราะเป็นหนึ่งใน Library ที่หน้าสนใจและสามารถทำให้เรานั้นขึ้นงานเราได้ไวมากยิ่งขึ้น ในบทความนี้เราจะขอย่อจาก React Hook Form เป็น RHF จะได้เรียกง่ายมากขึ้นและไม่ยาวมากจนเกินไป

RHF นั้นใช้ Code ในการใช้ร่วมกับ Input tag น้อยกว่าการ implement ด้วยการ Code เองใหม่ทั้งหมดและสามารถกลับมาแก้ไขหรือซ่อมตัว Code ได้ไวและแบ่งการทำงานได้ดียิ่งขึ้น และอีกหนึ่งจุดเด่นนั้นคือเรื่องความเร็วเนื่องจากตัว RHF จะแบ่งแยกการทำงานของ Form ออกจาก Component อื่นๆ ซึ่งจะช่วยเรื่อง Performance ให้ดียิ่งขึ้นตัวอย่างเช่นเมื่อ Form ถูกใช้งานนั้น React จะ Re-Render แค่ตัว Form ที่ใช้ RHF เท่านั้นไม่ Render Component อื่นจึงำให้เว็บของเรานั้นไวยิ่งขึ้น

เรามาเริ่มขั้นตอนการใช้งานก่อนเลยดีกว่าซึ่งการติดตั้งนั้นก็ติดตั้งเหมือนตัวอื่นๆ ทั่วไป

npm install react-hook-form

ในบทความนี้เราจะพูดถึงการใช้งานขั้นพื้นฐานเบื้องต้นในการใช้ก่อนนะครับหลังจ่กที่เราติดตั้งไปแล้วเราก็ทำการเรียกใช้ Module นั้นปกติไม่ต้องมีการ Set Up File ใดๆ ทั้งสิ้น

import { useForm } from "react-hook-form";

เราจะใช้เพียงแค่ useForm ในบทความนี้ก็เพียงพอสำหรับการใช้งานขั้นพื้นฐานแล้ว

ก่อนที่เรานั้นจะไปอธิบาย Code พื้นฐานานนั้นเราจะมาเปรียบเทีบยการ Implement ด้วยตัวเองกับการใช้ RHF

ตัวอย่างการ Implement ด้วยตัวเอง

import { useState } from 'react';

const App = (props) => {
    const [firstnamel, setFirstname] = useState('');

    const firstnameChangeHandler = (event) => {
        setEnteredEmail(event.target.value);
    }

    const submitHandler = (event) => {
        event.preventDefault();
        console.log(firstname);
    }

    return (
      <form onSubmit={submitHandler}>
        <input onChange={firstnameChangeHandler} />
        <button type="submit" >Submit</button>
      </form>
    )
}

export default App;

ตัวอย่างการใช้ RHF

import { useForm } from "react-hook-form";

const App = () => {
  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstname")} />
      <button type="submit" >Submit</button>
    </form>
  );
}

export default App;

code ที่เรา implement กับการใช้ RHF เมื่อเปรียบเทียบกันแล้วนั้นยาวกว่ากันอย่างแน่นอน แล้วเรื่อง Perfomance นั้น Code ที่เรา implement ก็ช้ากว่าด้วยนั้นเอง เพราะว่าในการพิม input ลงใน Input tag component ที่เรา Re-Render นั้นจะเกิดการ Re-Render ใหม่ทั้งหมดทุก component จึงทำให้ Perfomance ของเว็บไซต์เราตกลงได้ถ้า เมื่อเราใช้ในการขึ้น Production ที่ใหญ่กว่าที่ยกตัวอย่างข้างต้นมานั้นเอง แต่ถ้าเราใช้ RHF จะเกิดการ Re-Render ใหม่เฉพาะแค่ตัว Component ที่เราใช้ RHF เท่านั้นไม่กระทบต่อ Component อื่นๆ จึงทำให้ Perfomance นั้นดีกว่านั้นเอง

ใน useForm นั้นมีหลาย Function ให้ใช้งานอย่างหลากหลายมากแต่เราจะใช้เพียง register และ handleSubmit ก่อนเพราะว่าสองตัวนี้ก็เพียงพอแล้วในขั้นพื้นฐานเพื่อไม่ให้เกิดความสับสน

ตัวแรก register เราจะใช้ Function นี้ใน Input tag ซึ่ง register มันมี option ในตัวของ Input tag ให้ใช้อยู่ถึง 4 ตัวด้วยกันคือ onChange, onBlur, ref, name ซึ่งจะใช้ในตัว register ได้เลย การใช้ register พื้นฐานคือ {…register(“firstname”) firstname จะเป็น key ที่เอาไว้เก็บข้อมูลในตัว Input tag ของเราซึ่งตัว type ของข้อมูลนั้นจะเป็น object ซึ่ง schema เป็น { firstname: “” } ค่า default ของ firstname นั้นคือ “” เมื่อเราพิมเข้าไปใน Input tag นั้นข้อมูลที่พิมก็จะถูกเก็บลงใน key ของ firstname นั้นเอง

ตัวที่สอง handleSubmit คือตัวที่เราเอาไว้ใช้ใน onSubmit ซึ่งอยู่ใน Form tag ซึ่งจะใช้ในรูปแบบนี้ <form onSubmit={handleSubmit(onSubmit)}> อย่างในตัว Code ที่เรายกตัวอย่างข้างบนมาหรือจะเขียนให้ยาวยิ่งขึ้นแบบนี้ <form onSubmit={handleSubmit((data) => onSubmit(data)}> ได้เช่นกันเพราะเป็น Callback Function เลือกได้ตามใจชอบเลยครับ และเมื่อเรากด Submit form ไปตัว schema ที่เราจะเห็นได้คือ { firstname: “” } เพราะเราไม่ได้ใส่ข้อมูลอะไรเข้าไป

ติดตามตอนต่อไปซึ่งจะมีหลายๆ อย่างในการใช้และเล่นมากยิ่งขึ้น…