EthioCode · P3·L04 · React Hook Form 📋

01React Hook Form ምንድን ነው?

React Hook Form (RHF) — React ውስጥ ፎርሞችን (forms) ለማስተዳደር የሚያገለግል ቀላልና ፈጣን library ነው! ያለ re-render ጫና፣ ያለ ብዙ state መጨናነቅ — `useForm()` hookን ብቻ ትጠቀማላችሁ፣ ፎርሙም ዝግጁ ይሆናል!
Built on uncontrolled components — no re-render on every keystroke, blazing fast!

📦

npm install react-hook-form
ከ Zod ጋር ስትጠቀሙ ደግሞ → npm install @hookform/resolvers zod

❌ ያለ RHF ሲሰራ — ብዙ state እና ተደጋጋሚ re-render

const [name, setName]   = useState('');
const [email, setEmail] = useState('');
const [errors, setErrors] = useState({});

// ✍️ በእያንዳንዱ በተጻፈ ፊደል ሁሉ (Key-Stroke) componentኡ አዲስ (re-render) ይሆናል!
<input value={name}
  onChange={e => setName(e.target.value)} />
<input value={email}
  onChange={e => setEmail(e.target.value)} />

// ❌ አሁን ደግሞ Validation እና Submit ማሰብ... ሌላ ራስ ምታት ነው።

✅ React Hook Form — ቀላል አሰራር!

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

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

// ✅ በ uncontrolled component መርህ የሚሰራ ስለሆነ, በፍፁም re-render የለውም!
<input {...register('name',
    { required: 'ስም ያስፈልጋል!' })} />
<input {...register('email',
    { required: 'ኢሜይል ማስገባት ግዴታ ነው!' })} />

// ✅ Validation እና Submit — ሁሉም በአንድ ላይ built-in ናቸው!

02⚙️ useForm Hook — የፎርም ሁኔታ (Form State Visualizer)

Form State ማብራሪያ — ጠቅ አድርጉ ↓

RHF ውስጥ formState ምን ይመስላል?

💤

IDLE

→

✍️

DIRTY

→

❌

INVALID

→

✅

VALID

→

🚀

SUBMIT

03register · handleSubmit · formState — ዋና APIዎች

useForm.tsx

CORE API

register()

handleSubmit()

formState

watch · setValue

register() — ፊልዱን (Input) ከ React Hook Form ጋር ያያይዘዋል! ከዚህ በኋላ ስለ value, onChange አታስቡም። የፊልዱ ስምና የ Validation ህግጋቱ በሙሉ እዚህ ይመዘገባሉ!

register.tsx

// {...register()} — የሚያስፈልገንን ነገር በሙሉ ያካትታል (spreads props)
<input {...register('username', {
  required: 'Username መሞላት አለበት!',
  minLength: { value: 3, message: 'ቢያንስ 3 ፊደል ይፃፉ!' },
  maxLength: { value: 20, message: 'ቢበዛ 20 ፊደል ብቻ!' },
  pattern:   { value: /^[a-zA-Z0-9_]+$/,
               message: 'ፊደልና አሃዝ ብቻ ነው የሚፈቀደው!' },
})} />

// በውስጥ ታዋቂነት register() የሚሰጣቸው Props እነዚህ ናቸው:
// → name, ref, onChange, እና onBlur
// ↑ አሁን ሁሉም ያለናንተ ጣልቃ ገብነት አውቶማቲክ ይሰራሉ!

handleSubmit() — ፎርሙን "Submit" ሲደረግ ይሄ ፈንክሽን መጀመሪያ የ Validation ህግጋት መከበራቸውን ያጣራል። ሁሉ ነገር ትክክል ከሆነ (passed)፣ አዲሱን ዳታ ይዞ ወደ onSubmit ፈንክሽን ያልፋል!

handleSubmit.tsx

const { register, handleSubmit } = useForm();

// onSubmit — ፍተሻው አረንጓዴ (Valid) ከሆነ ብቻ ነው ይሄ ፈንክሽን የሚሰራው!
const onSubmit = (data) => {
  // አሁን 'data' ውስጥ ያሉት { username: 'Samuel', email: '...' } አይነት ናቸው
  console.log('✅ የገባው ዳታ:', data);
  // ☞ ወደ API የሚላክ ጥሪ (API call) ወይንም ሌላ ሎጂክ፣ ሁሉም እዚህ ይፃፋል!
};

// onError — ህጎቹ ሳይሟሉ ስህተት (failed) ካለ ምን ይደረግ?
const onError = (errors) => {
  console.log('❌ የተፈጠሩ ስህተቶች:', errors);
};

<form onSubmit={handleSubmit(onSubmit, onError)}>
  ...
</form>

formState — የፎርሙን አጠቃላይ ሁኔታ ማሳያ ነው! በተጠቃሚው ላይ ምን እየተከናወነ እንዳለ እንድታውቁ errors፣ isSubmitting፣ isValid፣ isDirty በመሳሰሉት ነጥቦች በዝርዝር ይሰጣችኋል።

formState.tsx

const {
  register, handleSubmit,
  formState: {
    errors,        // ⟵ ፍተሻ ሲደረግ ስህተቶቹ እዚህ ይጠራቀማሉ
    isSubmitting,  // ⟵ ወደ ሰርቨር የመላክ ሂደት (loading indicator) ላይ ነው ወይ?
    isValid,       // ⟵ ፎርሙ ላይ ያሉት መረጃዎች ህጉን ሙሉ በሙሉ አሟልተዋል ወይ?
    isDirty,       // ⟵ ተጠቃሚው መጀመሪያ ከነበረው state ቀይሮታል (ጽፎበታል) ወይ?
    isSubmitted,   // ⟵ የፎርሙ መረጃ በተሳካ ሁኔታ መላኩን ያሳያል።
    touchedFields, // ⟵ Focus አግኝተው የተነኩ ፊልዶችን ለመለየት ይረዳል
  }
} = useForm({ mode: 'onChange' });

// ♦ ስህተትን በቅድመ-ሁኔታ ለማሳየት (Showing Errors conditionally)
{errors.email && (
  <p style={{color: 'red'}}>
    {errors.email.message}
  </p>
)}

watch() — የ Field ዋጋዎች ሲሞሉ በ Live (በቀጥታ) አሁን ምን ላይ እንደደረሱ ለመከታተል (to observe changes)።
setValue() — ከኮዳችን በቀጥታ በማዘዝ የአንዱን field ዋጋ በፕሮግራም ለመሙላት!
reset() — ፎርሙን ሙሉ በሙሉ ለማፅዳትና ወደ መጀመሪያው ሁኔታ ለመመለስ! getValues() — ፎርሙን re-render ሳያደርጉ አሁን ያሉትን ዋጋዎች በጊዜያዊነት ለማንበብ።

watch-setValue-reset.tsx

const { register, watch, setValue,
        reset, getValues } = useForm();

// 👁️ watch() — field ውስጥ አሁን ያለውን መረጃ በቀጥታ ለማየት
const passwordInput = watch('password');
const allInputsFilledOutNow = watch(); // ሁሉንም በአንድ ላይ ማየት ሲፈልጉ

// ✏️ setValue() — የፎርም field-ዎችን በፕሮግራም መሙላት ሲያስፈልግ
setValue('name', 'Samuel');
setValue('role', 'admin', { shouldValidate: true }); // ዋጋውን ሞልቶ Validation እንዲሰራ ያደርጋል

// 🔄 reset() — ፎርሙን ባዶ ያደርገዋል!
reset(); // ሁሉንም ፊልዶች ያጸዳል
reset({ name: 'Samuel' }); // ፎርሙን አጽድቶ default ዋጋ ይሰጣል

// 📖 getValues() — Re-render ሳያደርጉ የፊልዱን ዋጋ ለጊዜው ለማንበብ
const valuesOnlyForReference = getValues();

04🛡️ Validation — መፈተሻ ህጎች እና የ Zod አጠቃቀም

በ RHF ሁለት አይነት Validation (ፍተሻ) መፍጠር ይቻላል — አንደኛው ራሱ RHF ውስጥ ያሉትን አጫጭር Built-in Rules (ውስጣዊ ህግጋት) መጠቀም ሲሆን፤ ሌላው ደግሞ ይበልጥ ዘመናዊና ኃይለኛ የሆነውን የ Zod Schema (በ zodResolver አማካኝነት) መምረጥ ትችላላችሁ!

validation.tsx

VALIDATION

📋 አጫጭር ህግጋቶች (Built-in Rules)

🛡️ ለትልልቅ Validation: Zod Resolver

📊 የ Validation Rules ዝርዝር

built-in-rules.tsx

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

// ፎርም ሲያዘጋጁ RHF የራሱን (Native html-like rules) ይሰጠናል። አፃፃፉም እንደዚህ ይመስላል:
<input {...register('email', {
  required: 'ይህን ሳታሟሉ ማለፍ አትችሉም!',
  pattern:  {
    value:   /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
    message: 'ያስገቡት የኢሜይል አድራሻ ልክ አይደለም!'
  }
})} />
{errors.email && <span>{errors.email.message}</span>}

<input type="password"
  {...register('password', {
    required:  'ሚስጥራዊ ቁጥርዎን ያካቱ (Required)!',
    minLength: { value: 8, message: 'ቢያንስ 8 ፊደል መሆን አለበት!' },
    validate:  (v) => v !== 'password'
              || 'እንዲህ በቀላሉ የሚገመት አይፈቀድም!'
  })} />

zod-resolver.tsx

import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';


// 1. ከቀደመው P3·L02 የተማራችሁት Schema ይህ ነው (በZOD ህግ እንገነባለን)
const RegisterSchema = z.object({
  name:     z.string().min(2, 'የስም ርዝመት ቢያንስ 2 መሆን አለበት'),
  email:    z.string().email('ትክክለኛ ኢሜይል አይደለም'),
  password: z.string().min(8, 'Password ቢያንስ 8 መሆን አለበት'),
  confirm:  z.string()
}).refine(data => data.password === data.confirm, {
  // ሁለቱንም Input ዋጋዎች እያገናዘበ 'Password Match' ማድረጉን ያረጋግጣል:
  message: 'ያስገቡት ቃለ-መጠይቅ እርስ በርሱ አይመሳሰልም!',
  path:    ['confirm'],
});

type RegisterFormDataType = z.infer<typeof RegisterSchema>;

// 2. በZOD ከተፈጠረው Validation ጋር useForm ማገናኘት
const { register, handleSubmit,
        formState: { errors } } = useForm<RegisterFormDataType>({
  resolver: zodResolver(RegisterSchema),   // የፈጠርነውን schema እዚህ እናስገባለን
  mode:     'onChange', // ይህ የ 'Real-Time' ምላሽ እንድናገኝ ያስችላል
});

// 3. register ን በራሱ input አምዱ ውስጥ ስናካተው ስለ Rule መጨነቅ አይጠበቅብንም
<input {...register('email')} />
{errors.email && <p>{errors.email.message}</p>}

የ Validation መለያ (Rule)	ትርጉም እና መቼ ጥቅም ላይ ይውላል?	እንዴት እንፃፈው? (ምሳሌ)
required	ፊልዱ ባዶ ሆኖ እንዳያልፍ ለመገደብ ይውላል!	required: 'ይህ ፊልድ መሞላት አለበት!'
minLength	የጽሁፉ ርዝመት ከተገለጸው ቁጥር እንዳያንስ ያደርጋል	minLength: {value:3, message:'ቢያንስ 3 ፊደል ይጻፉ!'}
maxLength	የጽሁፉ ርዝመት ከተሰጠው ጣሪያ (MAX) መብለጥ እንደሌለበት	maxLength: {value:50, message:'ከ 50 ፊደል መብለጥ የለበትም!'}
min	ለቁጥር (Number fields) ሊኖረው የሚችለውን አነስተኛ መጠን ይወስናል	min: {value:18, message:'ዕድሜዎ ከ 18 ማነስ የለበትም!'}
max	ለቁጥር እና ለቀናት ሊፈቀድ የሚችለውን ከፍተኛ መጠን ይወስናል	max: {value:120, message:'ከፍተኛው መጠን 120 ነው!'}
pattern	ጽሁፉ የተሰጠውን Regex Pattern መከተሉን ያረጋግጣል	pattern: {value: /^[a-z]+$/, message:'እባክዎ በትንሽ ፊደላት ብቻ ይጻፉ!'}
validate	የራሳችንን Custom function ጽፈን ፎርሙን ለመፈተሽ ያገለግላል	validate: v => v !== 'admin' \|\| 'ይህ የተከለከለ ስም ነው!'

05🎮 ቀጥታ መሞከሪያ — Live Form Demo!

የምዝገባ (Registration) ፎርም ሲሙሌሽን!

💤 IDLE

📝 የ ምዝገባ Form!

ሙሉ ስም (Full Name)

z.string().min(2) — ቢያንስ 2 ፊደል

የኢሜይል አድራሻ (Email)

z.string().email() — ትክክለኛ format ይፃፉ

የይለፍ ቃል (Password)

z.string().min(8) — ቢያንስ 8 ቁምፊዎች ያስፈልጋሉ

የይለፍ ቃል ማረጋገጫ (Confirm Password)

.refine() — ከላይ ከሞሉት የይለፍ ቃል ጋር ተመሳሳይ መሆን አለበት

✅ በተሳካ ሁኔታ Submit ተደርጓል! (Success)!

⚡ የ formState እንቅስቃሴ ቀጥታ እይታ (Live State)

isValidfalse

isDirtyfalse

isSubmittingfalse

isSubmittedfalse

errors.nameundefined

errors.emailundefined

errors.passwordundefined

errors.confirmundefined

👁️ የገቡትን ፅሁፎች watch() በማድረግ በቀጥታ መከታተል

name""

email""

password""

06🔬 Controller — UI Libraries ጋር ማገናኘት

Controller — RHFን እንደ Material UI፣ Chakra UI ከመሳሰሉ 3rd party UI libraries ጋር ስትጠቀሙ register() ብቻውን በቂ አይሆንም። ስለዚህ Controllerን ትጠቀማላችሁ። ይሄም ለ Custom Field አስፈላጊ የሆኑትን (onChange, onBlur, value) ያቀብለናል።

controller.tsx

CONTROLLER

Controller

useFieldArray

Form Validation Modes

Controller.tsx

import { useForm, Controller } from 'react-hook-form';

// 'control' የተባለው ቁልፍ ነገር Controllerን ከ useForm ጋር ያያይዘዋል!
const { control, handleSubmit } = useForm();

<Controller
  name="role"
  control={control}
  defaultValue="user"
  rules={{ required: 'እባክዎ አንድ ሚና ይምረጡ!' }}
  // render ፕሮፕ ለተቀባዩ Component (MUI, Chakra) አስፈላጊ ነገሮችን ያቀብላል
  render={({ field, fieldState }) => (
    <CustomSelect  
      {...field}           // onChange, onBlur, value, እና name እዚህ ውስጥ ይገኛሉ
      options={['admin','user','moderator']}
      error={fieldState.error?.message} // የስህተት መልዕክት ካለ እዚህ ይተላለፋል
    />
  )}
/>

useFieldArray.tsx

import { useForm, useFieldArray } from 'react-hook-form';

const { control, register } = useForm({
  defaultValues: { skills: [{ name: '' }] }
});

// Dynamic Fields (ተለዋዋጭ ፊልዶች) — ዝርዝር ላይ አዲስ ፊልድ ለመጨመር (append) ወይም ለማጥፋት (remove) ይጠቅማል!
const { fields, append, remove } = useFieldArray({
  control,
  name: 'skills',
});

{fields.map((field, index) => (
  <div key={field.id}>
    <input
      {...register(`skills.${index}.name`)}   // skills.0.name, skills.1.name እያለ ይመዘግባል
      placeholder="ምን ችሎታ አለዎት?"
    />
    <button onClick={() => remove(index)}>🗑️ አስወግድ</button>
  </div>
))}

<button onClick={() => append({ name: '' })}>
  + አዲስ ችሎታ ጨምር
</button>

Mode — Validation መቼ እንዲሰራ እንደምትፈልጉ የምትወስኑበት ነው (ለምሳሌ፡ ሲፃፍ፣ focus ሲጠፋ፣ ወዘተ)።

07⚡ Production-Ready Setup (አጠቃላይ አሰራር)

RegisterForm.tsx

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

// 1️⃣ የ Zod Schema ማዘጋጀት
const Schema = z.object({
  name:  z.string().min(2, 'ቢያንስ 2 ፊደል መሆን አለበት'),
  email: z.string().email('ትክክለኛ የኢሜይል አድራሻ ያስገቡ'),
  password: z.string().min(8, 'የይለፍ ቃል ቢያንስ 8 ፊደል መሆን አለበት'),
});

type FormData = z.infer<typeof Schema>;

export default function RegisterForm() {
  const {
    register, handleSubmit,
    formState: { errors, isSubmitting },
    reset,
  } = useForm<FormData>({
    resolver: zodResolver(Schema),    // ✅ Zodን ከ RHF ጋር ያገናኛል
    mode:     'onChange',              // ✅ Validation በቅጽበት እንዲሰራ ያደርጋል
  });

  // 3️⃣ Submit ሲደረግ የሚሰራ ፈንክሽን
  const onSubmit = async (data: FormData) => {
    await axios.post('/api/register', data);  
    reset(); // ✅ ሲሳካ ፎርሙን ያጸዳል
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>

      <input {...register('name')}  placeholder="ሙሉ ስም" />
      {errors.name && <p>{errors.name.message}</p>}

      <input {...register('email')} placeholder="ኢሜይል" />
      {errors.email && <p>{errors.email.message}</p>}

      <input {...register('password')} type="password" placeholder="የይለፍ ቃል" />
      {errors.password && <p>{errors.password.message}</p>}

      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? '⏳ በመመዝገብ ላይ...' : '✅ ይመዝገቡ'}
      </button>

    </form>
  );
}

📌ጠቅለል ያለ ማስታወሻ

1

useForm() — የፎርማችን መነሻ

ፎርሞችን ለማስተዳደር register፣ handleSubmit እና formState የተባሉ ዋና መገልገያዎችን በአንድ ላይ ይሰጠናል።

ያለ ምንም Context Provider በቀጥታ በ Hook መጠቀም ይቻላል!

2

register() — Inputን ከ RHF ጋር ማያያዣ

የመግቢያ ፎርሞችን (Inputs) ከ React Hook Form ጋር የሚያገናኝ እና እንደ onChange እና onBlur ያሉ ፕሮፖችን በ Spread Operator {...register('name')} የሚያስተላልፍ ዋና ፈንክሽን ነው።

ፎርሙ uncontrolled እንዲሆን በማድረግ አላስፈላጊ Re-renderን ይከላከላል!

3

Zod + zodResolver — ምርጡ የ Validation ጥምረት

Zodን በመጠቀም ጠንካራ የፍተሻ ደንቦችን (Schema) መጻፍ እና በ zodResolver አማካኝነት ከ React Hook Form ጋር ያለምንም እንከን ማገናኘት ይቻላል።

TypeScriptን እና Runtime Validationን በአንድ ላይ ለማግኘት ይረዳል!

4

Mode — Validation መቼ ይሰራ?

በ useForm ምርጫዎች ውስጥ onSubmit (ሲላክ ብቻ)፣ onBlur (ፊልዱ ተለቆ ሲወጣ) ወይም onChange (እያንዳንዱ ፊደል ሲጻፍ) ፍተሻው እንዲሰራ ማስተካከል ይቻላል።

እንደ ፕሮጀክቱ ፍላጎት የተጠቃሚውን ልምድ ለማሻሻል ይጠቅማል!

5

Controller — ለ 3rd Party UI Libraries

መደበኛ ያልሆኑ ወይም የውጭ UI ላይብረሪዎችን (እንደ Material UI ያሉ) ከ RHF ጋር ለማገናኘት እና የፎርም ዳታን በትክክል ለማስተላለፍ በ Controller በኩል ማለፍ ግዴታ ነው።

ቁጥጥር የሚደረግባቸውን (Controlled) የውጭ ኮምፖነንቶች ለማስተዳደር ይጠቅማል!

🎯የዕውቀት መፈተኛ (Quiz)

❓ React Hook Form ውስጥ register() ስራው ምንድን ነው?

What is the primary role of register() in React Hook Form?

A ፎርሙን Submit ለማድረግ ከ API server ጋር ግንኙነት መፍጠር

B Component-ው ሁልጊዜ re-render እንዲያደርግ ማስገደድ

C ፊልዱን ከ RHF ጋር ማያያዝ — name, ref, onChange, onBlur propsን ለ input ማቀበል ✅

D የ Zod Schemaን ፈጥሮ Validation መስራት

React Hook Form —ፎርም መስሪያው ቀላሉ መንገድ! 📋

React Hook Form —
ፎርም መስሪያው ቀላሉ መንገድ! 📋