TanStackIntermediate

React Hook Form — Setup

react-hook-form install, useForm-এর core API — register, handleSubmit, errors — বাংলায়।

7টি অংশবাংলা ভাষায়

React Hook Form (RHF) React-এ form-এর সবচেয়ে জনপ্রিয় library — re-render কম, ভলিডেশন সহজ, আর uncontrolled components-বেষ্টিত। প্রথমে এটি project-এ যোগ করতে হবে:

তিনটি packagebash

bash

npm i react-hook-form @hookform/resolvers zod

useForm basics

সরল formtsx

tsx

"use client";

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

interface FormValues {
  name: string;
  price: number;
}

export function ProductForm() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormValues>({
    defaultValues: { name: "", price: 0 },
  });

  function onSubmit(values: FormValues) {
    console.log(values);
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Input placeholder="নাম" {...register("name")} />
      <Input placeholder="দাম" type="number" {...register("price")} />
      <Button type="submit">সাবমিট</Button>
    </form>
  );
}

কেন register

register('name') → input-কে form-এর state-র সাথে সংযুক্ত করে
handleSubmit(onSubmit) → validation পাস হলে onSubmit চালায়, errors এলে আটকে দেয়
formState.errors → প্রতিটি field-এর error message (zod থেকে আসবে)
আপনি আর কোনো onChange/useState রাখতে হবে না — এটি uncontrolled হতে পারে

শুধু ফর্ম focus

RHF value-কে প্রতি keystroke-এ re-render করে না — কারণ এটি uncontrolled। তাই বড় form-এও পারফরম্যান্স ভয় নেই। ইনপুট-মান দরকার হলে watch(), edits-এ setValue() ব্যবহার হয়।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।