کتابخانه react-hook-form

یکی از مهم ترین بخش های هر وب وسایت و اپلیکیشنی، فرم ها هستند. ما از فرم ها برای تعامل با کاربران استفاده می کنیم پس لازمه که این بخش رو خیلی خوب پیاده سازی کنیم.

دو مطلب مهم رو باید در مورد فرم ها رعایت کنیم:

1) فرم ها باید تا حد امکان قابل فهم باشند و کاربر رو سردرگم نکنن. باید به خوبی کاربر رو راهنمایی کنیم که توی فرم ها چه چیزی باید وارد کنه، اگر فرم رو اشتباه پر کرد بهش خطاها رو اعلام کنیم و ...

2) داخل فرم ها کاربر می تونه یه سری اطلاعات وارد کنه و اونا رو مثلا به سرور ارسال کنه، در نتیجه باید خیلی به امنیت فرم ها دقت کنیم و اجازه ندیم که کاربر هر چیزی خواست رو توی فرم ها وارد کنه و ارسال کنه، چون با استفاده از همین فرم ها میشه به سایت حمله کرد و اسکریپت های مخربی رو اجرا کرد و مشکلاتی رو برای وب سایت به وجود آورد

برای نوشتن فرم ها ما به هیچ ابزار خاصی نیاز نداریم و با html و javascript میشه فرم ها رو ساخت و اونا رو مدیریت کرد ولی توی دنیای برنامه نویسی اصطلاحی داریم به نام clean code. یعنی تر و تمیز کد بزن. اگر بخواید بدون کمک کتابخونه ها یه فرم رو کامل و حرفه ای بنویسید که همه جور اعتبار سنجی (validation) رو داخلش مدیریت کنید و خطاها رو نمایش بدید و focus و blur رو مدیریت کنید و ... قطعا باید کلی کد بنویسید ولی امروز می خوام شما رو با کتابخونه ای آشنا کنم که می تونه به بهترین شکل فرم های شما رو مدیریت کنه

این کتابخونه به طور میانگین هفته ای 2 میلیون بار دانلود میشه که عدد فوق العاده ای هستش

مزایا:

1) عملکرد (Performance) بهتر

نوع کارکرد این کتابخونه نسبت به کتابخونه های مشابهش مثل formik یه خورده متفاوته. برخلاف کتابخونه هایی مثل formik که از state برای کنترل input ها استفاده می کنه react-hook-form از ref برای کنترل input ها استفاده می کنه که این باعث میشه performance بهتری داشته باشیم و تعداد رندرهای مجدد (re-render) کمتری رو شاهد خواهیم بود که این خیلی عالیه

2) حجم کم

این کتابخونه هیچ وابستگی (dependency) نداره که این باعث میشه حجم کتابخونه بسیار کم باشه.

3) کدکمتر، عملکرد بیشتر (less code, more performant)

یکی از بهترین ویژگی های این کتابخونه همینه

نصب:

npm install react-hook-form

روش استفاده:

اول هوک useForm رو import می کنیم

import { useForm } from &quotreact-hook-form&quot

بعد داخل کامپوننتمون به شکل زیر عمل می کنیم

const { register, handleSubmit } = useForm();

هوک useForm یه آبجکت برمیگردونه که یه سری متد و پراپرتی مفید بهمون میده که ما در اینجا فعلا به دو مورد اونها اشاره می کنیم:

1) متد register

این متد رو به شکل زیر به input ها و بقیه اعضای فرم ها مثل Checkbox و Dropdown و ... می دیم.

<input type=&quottext&quot name=&quotfirstName&quot {...register('firstName')} />

یکی از مهمترین متدهای react-hook-form همین register هستش که وظیفه داره اجزای فرممون رو زیرنظر بگیره و به محض این که تغییری در input یا سایر اجزا اتفاق افتاد این تغییرات رو داخل متغیری که به عنوان ورودی میگیره ذخیره می کنه.

توی مثال بالا، به محض این که داخل input چیزی تایپ بشه، عبارت تایپ شده داخل متغیری به نام firstName ذخیره میشه.

2) متد handleSubmit

هر فرمی یه دکمه داره برای ثبت داده های وارد شده داخل فرم. مثل دکمه ثبت اطلاعات یا ثبت نام یا هر چیز دیگه ای. با کلیک کردن روی این دکمه react-hook-form میاد همه داده هایی که داخل فرم وارد کردید رو جمع می کنه و داخل یه آبجکت نگهداری میکنه و توسط متد handleSubmit به شکل زیر بهمون برمیگردونه که این خیلی عالیه

توی مثال بالا همه داده های وارد شده توی فرم داخل آبجکتی به نام data ذخیره شده که می تونیم این آبجکت data رو مثلا بفرستیم به سرور یا log بگیریم یا هر چیز دیگه ای.

مثال کلی:

مثال بالا یه فرم ساده برای ثبت نام کاربر هستش که توی همین مثال ساده هم میشه دید که چقدر کدهامون تمیزن و خوانایی بالا دارن و شما به راحتی می تونین با یه خورده کد نویسی کلی امکانات جذاب دیگه به فرم هاتون اضافه کنید و لذتشو ببرین.

این کتابخونه کلی امکانات جذاب و متنوع داره. در این مقاله سعی کردم به صورت مختصر این کتابخونه رو معرفی کنم، اگر علاقمند هستید که بیشتر در مورد react-hook-form مطالعه کنید پیشنهاد می کنم به سایت react-hook-form یه سری بزنید و با این کتابخونه بیشتر آشنا بشید.

اگر نقدی، پیشنهادی یا سوالی داشتین، خوشحال میشم در قسمت نظرات با من به اشتراک بزارید.

شاد و موفق باشید.

منابع:

1-https://react-hook-form.com/

2-https://blog.logrocket.com/react-hook-form-complete-guide/