📅 NGÀY 42: React Hook Form - Advanced
🎯 Mục tiêu học tập (5 phút)
- [ ] Thành thạo
useFieldArrayđể quản lý dynamic form arrays - [ ] Hiểu và sử dụng
useFormContextcho nested components - [ ] Tối ưu performance với
useWatchthay vìwatch() - [ ] Xây dựng custom field components tái sử dụng
- [ ] Nắm vững advanced validation patterns
- [ ] Biết cách error recovery và form persistence strategies
🤔 Kiểm tra đầu vào (5 phút)
- React Hook Form Basics (Ngày 41): useForm, register, handleSubmit hoạt động như thế nào?
- Context API (Ngày 36-38): Làm sao share state giữa components?
- Performance (Ngày 32-34): useMemo, useCallback, React.memo dùng để làm gì?
📖 PHẦN 1: GIỚI THIỆU KHÁI NIỆM (30 phút)
1.1 Vấn Đề Thực Tế - Complex Forms
Tình huống: E-commerce checkout form với dynamic items và địa chỉ giao hàng
Challenges:
jsx
// Problem 1: Dynamic cart items
const [items, setItems] = useState([{ product: '', quantity: 1, price: 0 }]);
// Problem 2: Nested form sections
<CheckoutForm>
<CartSection /> {/* Needs access to form */}
<ShippingSection /> {/* Needs access to form */}
<PaymentSection /> {/* Needs access to form */}
</CheckoutForm>;
// Problem 3: Performance với watch()
const watchAll = watch(); // Re-renders parent + ALL children!
// Problem 4: Reusable fields
// Mỗi field lặp lại code validation, error display...Giải pháp RHF Advanced:
useFieldArray→ Dynamic arraysuseFormContext→ Share form across componentsuseWatch→ Optimized watching- Custom components → DRY principle
1.2 Core Advanced APIs
1. useFieldArray
Purpose: Quản lý array of fields (add/remove/reorder)
jsx
import { useFieldArray } from 'react-hook-form';
const { fields, append, remove, insert, update, move } = useFieldArray({
control, // from useForm()
name: 'items', // array field name
});Key Features:
- Dynamic add/remove items
- Stable unique IDs (field.id)
- Automatic re-indexing
- Integrated validation
2. useFormContext
Purpose: Access form state từ deeply nested components
jsx
// Parent
<FormProvider {...methods}>
<form>
<NestedComponent /> {/* Can access form */}
</form>
</FormProvider>;
// Child (anywhere in tree)
const { register, formState } = useFormContext();Benefits:
- No prop drilling
- Clean component APIs
- Easier composition
3. useWatch
Purpose: Optimized field watching (không re-render parent)
jsx
// ❌ watch() - Re-renders parent
const value = watch('fieldName');
// ✅ useWatch - Isolated re-render
const value = useWatch({ name: 'fieldName' });1.3 Mental Model
ADVANCED RHF ARCHITECTURE:
┌─────────────────────────────────────────┐
│ FormProvider (Context) │
│ ┌───────────────────────────────────┐ │
│ │ useForm() methods │ │
│ │ (register, handleSubmit, etc.) │ │
│ └───────────────────────────────────┘ │
│ ↓ ↓ ↓ │
│ ┌─────────┴──┴──────────┐ │
│ │ useFormContext() │ │
│ │ (access from child) │ │
│ └───────────────────────┘ │
└─────────────────────────────────────────┘
FIELD ARRAY FLOW:
useFieldArray DOM
┌──────────────┐ ┌─────┐
│ fields: [] │─────────────▶│ UI │
│ append() │ └─────┘
│ remove() │ │
│ update() │ │ user action
└──────────────┘◀────────────────┘
↓ re-index
┌──────────────┐
│ Updated IDs │
└──────────────┘
WATCH vs useWatch:
watch(): useWatch():
Parent Component Parent Component
↓ re-render ↓ NO re-render
All Children re-render Only consumer re-renders
❌ Performance issue ✅ Optimized
Analogy:
- useFieldArray = Spreadsheet rows (add/delete)
- useFormContext = Global settings (access anywhere)
- useWatch = Observer pattern (subscribe to changes)1.4 Hiểu Lầm Phổ Biến
❌ "useFieldArray chỉ dùng cho simple arrays" → Sai! Có thể nest arrays, objects phức tạp, conditional fields.
❌ "useFormContext thay thế props drilling trong mọi trường hợp" → Không! Chỉ dùng cho form-related data. Other props vẫn drill normally.
❌ "useWatch và watch() giống nhau" → Sai! useWatch tối ưu hơn, không re-render parent component.
❌ "Field array index là stable ID" → SAI NGHIÊM TRỌNG! Luôn dùng field.id, không dùng array index làm key.
💻 PHẦN 2: LIVE CODING (45 phút)
Demo 1: useFieldArray - Shopping Cart ⭐⭐
Dynamic cart items với add/remove
💡 Code Example
jsx
/**
* Shopping Cart - useFieldArray Demo
*
* Features:
* - Add/remove items
* - Quantity update
* - Price calculation
* - Validation per item
*/
import { useForm, useFieldArray } from 'react-hook-form';
function ShoppingCart() {
const {
register,
control,
handleSubmit,
watch,
formState: { errors },
} = useForm({
defaultValues: {
items: [{ product: '', quantity: 1, price: 0 }],
},
});
const { fields, append, remove } = useFieldArray({
control,
name: 'items',
});
const watchItems = watch('items');
// Calculate total
const total = watchItems.reduce((sum, item) => {
return sum + (item.quantity || 0) * (item.price || 0);
}, 0);
const onSubmit = (data) => {
console.log('Order:', data);
console.log('Total:', total);
alert(`Order placed! Total: $${total.toFixed(2)}`);
};
return (
<div style={{ maxWidth: '800px', padding: '20px' }}>
<h2>🛒 Shopping Cart</h2>
<form onSubmit={handleSubmit(onSubmit)}>
{fields.map((field, index) => (
<div
key={field.id} // ✅ CRITICAL: Use field.id, NOT index!
style={{
padding: '16px',
marginBottom: '16px',
backgroundColor: '#f9f9f9',
borderRadius: '8px',
border: '1px solid #e0e0e0',
}}
>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: '12px',
}}
>
<h3 style={{ margin: 0 }}>Item #{index + 1}</h3>
{fields.length > 1 && (
<button
type='button'
onClick={() => remove(index)}
style={{
padding: '6px 12px',
backgroundColor: '#f44336',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
}}
>
🗑️ Remove
</button>
)}
</div>
<div
style={{
display: 'grid',
gridTemplateColumns: '2fr 1fr 1fr',
gap: '12px',
}}
>
{/* Product Name */}
<div>
<label
style={{
display: 'block',
marginBottom: '4px',
fontSize: '14px',
}}
>
Product *
</label>
<input
{...register(`items.${index}.product`, {
required: 'Product name is required',
})}
placeholder='Enter product name'
style={{
width: '100%',
padding: '8px',
border: errors.items?.[index]?.product
? '2px solid red'
: '1px solid #ccc',
borderRadius: '4px',
}}
/>
{errors.items?.[index]?.product && (
<span style={{ color: 'red', fontSize: '12px' }}>
{errors.items[index].product.message}
</span>
)}
</div>
{/* Quantity */}
<div>
<label
style={{
display: 'block',
marginBottom: '4px',
fontSize: '14px',
}}
>
Qty *
</label>
<input
type='number'
{...register(`items.${index}.quantity`, {
required: 'Required',
min: { value: 1, message: 'Min 1' },
max: { value: 99, message: 'Max 99' },
valueAsNumber: true, // Convert to number
})}
style={{
width: '100%',
padding: '8px',
border: errors.items?.[index]?.quantity
? '2px solid red'
: '1px solid #ccc',
borderRadius: '4px',
}}
/>
{errors.items?.[index]?.quantity && (
<span style={{ color: 'red', fontSize: '12px' }}>
{errors.items[index].quantity.message}
</span>
)}
</div>
{/* Price */}
<div>
<label
style={{
display: 'block',
marginBottom: '4px',
fontSize: '14px',
}}
>
Price ($) *
</label>
<input
type='number'
step='0.01'
{...register(`items.${index}.price`, {
required: 'Required',
min: { value: 0.01, message: 'Min $0.01' },
valueAsNumber: true,
})}
placeholder='0.00'
style={{
width: '100%',
padding: '8px',
border: errors.items?.[index]?.price
? '2px solid red'
: '1px solid #ccc',
borderRadius: '4px',
}}
/>
{errors.items?.[index]?.price && (
<span style={{ color: 'red', fontSize: '12px' }}>
{errors.items[index].price.message}
</span>
)}
</div>
</div>
{/* Subtotal */}
<div
style={{
marginTop: '8px',
textAlign: 'right',
fontWeight: 'bold',
color: '#2196f3',
}}
>
Subtotal: $
{(
(watchItems[index]?.quantity || 0) *
(watchItems[index]?.price || 0)
).toFixed(2)}
</div>
</div>
))}
{/* Add Item Button */}
<button
type='button'
onClick={() => append({ product: '', quantity: 1, price: 0 })}
disabled={fields.length >= 10}
style={{
width: '100%',
padding: '12px',
backgroundColor: fields.length >= 10 ? '#ccc' : '#2196f3',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: fields.length >= 10 ? 'not-allowed' : 'pointer',
marginBottom: '16px',
fontSize: '16px',
}}
>
➕ Add Item {fields.length >= 10 && '(Max 10 items)'}
</button>
{/* Total */}
<div
style={{
padding: '16px',
backgroundColor: '#e3f2fd',
borderRadius: '8px',
marginBottom: '16px',
}}
>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
fontSize: '20px',
fontWeight: 'bold',
}}
>
<span>Total:</span>
<span style={{ color: '#2196f3' }}>${total.toFixed(2)}</span>
</div>
</div>
{/* Submit */}
<button
type='submit'
style={{
width: '100%',
padding: '16px',
backgroundColor: '#4caf50',
color: 'white',
border: 'none',
borderRadius: '4px',
fontSize: '18px',
fontWeight: 'bold',
cursor: 'pointer',
}}
>
Place Order
</button>
</form>
{/* Tips */}
<div
style={{
marginTop: '24px',
padding: '16px',
backgroundColor: '#fff3e0',
borderRadius: '8px',
}}
>
<h4>💡 useFieldArray Key Points:</h4>
<ul style={{ margin: '8px 0', paddingLeft: '20px', fontSize: '14px' }}>
<li>
<strong>field.id</strong> - Always use as key (not index!)
</li>
<li>
<strong>append()</strong> - Add item to end
</li>
<li>
<strong>remove(index)</strong> - Remove at index
</li>
<li>
<strong>valueAsNumber</strong> - Convert string to number
</li>
<li>
<strong>Nested errors</strong> - Access via
errors.items?.[index]?.field
</li>
</ul>
</div>
</div>
);
}
/*
useFieldArray Methods:
const { fields, append, prepend, remove, insert, update, move, swap, replace } =
useFieldArray({ control, name: 'arrayName' });
Methods:
- append(value, options?) - Add to end
- prepend(value, options?) - Add to start
- insert(index, value, options?) - Insert at index
- remove(index) - Remove at index
- update(index, value) - Update at index
- move(from, to) - Move item
- swap(indexA, indexB) - Swap two items
- replace(values) - Replace entire array
Options:
- shouldFocus: boolean - Focus on new field?
- focusIndex: number - Which field to focus?
- focusName: string - Which nested field to focus?
Important:
✅ Always use field.id as key
❌ Never use array index as key
✅ Use valueAsNumber for number inputs
✅ Proper error path: errors.array?.[index]?.field
*/Demo 2: useFormContext - Nested Components ⭐⭐
Share form state across component tree
💡 Code Example
jsx
/**
* Checkout Form - useFormContext Demo
*
* Shows how to:
* - Share form across multiple components
* - Avoid prop drilling
* - Keep components clean and focused
*/
import { useForm, FormProvider, useFormContext } from 'react-hook-form';
// ============================================
// MAIN FORM COMPONENT (Parent)
// ============================================
function CheckoutForm() {
const methods = useForm({
mode: 'onBlur',
defaultValues: {
// Personal Info
firstName: '',
lastName: '',
email: '',
// Shipping
address: '',
city: '',
zipCode: '',
// Payment
cardNumber: '',
expiryDate: '',
cvv: '',
},
});
const onSubmit = (data) => {
console.log('Checkout data:', data);
alert('Order placed successfully!');
};
return (
<FormProvider {...methods}>
{/* FormProvider wraps form - children can access context */}
<form onSubmit={methods.handleSubmit(onSubmit)}>
<div style={{ maxWidth: '800px', padding: '20px' }}>
<h1>Checkout</h1>
{/* Nested components - NO PROPS NEEDED! */}
<PersonalInfoSection />
<ShippingSection />
<PaymentSection />
<SubmitButton />
</div>
</form>
</FormProvider>
);
}
// ============================================
// PERSONAL INFO SECTION
// ============================================
function PersonalInfoSection() {
// ✅ Access form via useFormContext - NO PROPS!
const {
register,
formState: { errors },
} = useFormContext();
return (
<section
style={{
marginBottom: '24px',
padding: '20px',
backgroundColor: '#f9f9f9',
borderRadius: '8px',
}}
>
<h2>👤 Personal Information</h2>
<div
style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}
>
<FormField
label='First Name'
name='firstName'
validation={{ required: 'First name is required' }}
/>
<FormField
label='Last Name'
name='lastName'
validation={{ required: 'Last name is required' }}
/>
</div>
<FormField
label='Email'
name='email'
type='email'
validation={{
required: 'Email is required',
pattern: {
value: /\S+@\S+\.\S+/,
message: 'Invalid email',
},
}}
/>
</section>
);
}
// ============================================
// SHIPPING SECTION
// ============================================
function ShippingSection() {
const {
register,
formState: { errors },
} = useFormContext();
return (
<section
style={{
marginBottom: '24px',
padding: '20px',
backgroundColor: '#f9f9f9',
borderRadius: '8px',
}}
>
<h2>📦 Shipping Address</h2>
<FormField
label='Street Address'
name='address'
validation={{ required: 'Address is required' }}
/>
<div
style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: '12px' }}
>
<FormField
label='City'
name='city'
validation={{ required: 'City is required' }}
/>
<FormField
label='ZIP Code'
name='zipCode'
validation={{
required: 'ZIP required',
pattern: {
value: /^\d{5}$/,
message: 'Must be 5 digits',
},
}}
/>
</div>
</section>
);
}
// ============================================
// PAYMENT SECTION
// ============================================
function PaymentSection() {
return (
<section
style={{
marginBottom: '24px',
padding: '20px',
backgroundColor: '#f9f9f9',
borderRadius: '8px',
}}
>
<h2>💳 Payment Information</h2>
<FormField
label='Card Number'
name='cardNumber'
validation={{
required: 'Card number is required',
pattern: {
value: /^\d{16}$/,
message: 'Must be 16 digits',
},
}}
placeholder='1234567812345678'
/>
<div
style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}
>
<FormField
label='Expiry Date'
name='expiryDate'
validation={{
required: 'Expiry date required',
pattern: {
value: /^(0[1-9]|1[0-2])\/\d{2}$/,
message: 'Format: MM/YY',
},
}}
placeholder='MM/YY'
/>
<FormField
label='CVV'
name='cvv'
type='password'
validation={{
required: 'CVV required',
pattern: {
value: /^\d{3,4}$/,
message: '3-4 digits',
},
}}
placeholder='123'
/>
</div>
</section>
);
}
// ============================================
// REUSABLE FORM FIELD COMPONENT
// ============================================
function FormField({ label, name, type = 'text', validation, placeholder }) {
const {
register,
formState: { errors },
} = useFormContext(); // ✅ Access form context
return (
<div style={{ marginBottom: '16px' }}>
<label
style={{ display: 'block', marginBottom: '4px', fontWeight: 'bold' }}
>
{label}
{validation?.required && <span style={{ color: 'red' }}> *</span>}
</label>
<input
type={type}
{...register(name, validation)}
placeholder={placeholder}
style={{
width: '100%',
padding: '8px',
border: errors[name] ? '2px solid red' : '1px solid #ccc',
borderRadius: '4px',
fontSize: '14px',
}}
/>
{errors[name] && (
<span
style={{
color: 'red',
fontSize: '14px',
display: 'block',
marginTop: '4px',
}}
>
{errors[name].message}
</span>
)}
</div>
);
}
// ============================================
// SUBMIT BUTTON (accesses form state)
// ============================================
function SubmitButton() {
const {
formState: { isSubmitting, isValid, isDirty },
} = useFormContext();
return (
<div
style={{
padding: '20px',
backgroundColor: '#e3f2fd',
borderRadius: '8px',
}}
>
<div style={{ marginBottom: '12px', fontSize: '14px' }}>
<strong>Form Status:</strong>
<ul style={{ margin: '4px 0', paddingLeft: '20px' }}>
<li>Valid: {isValid ? '✅' : '❌'}</li>
<li>Modified: {isDirty ? '✅' : '❌'}</li>
<li>Submitting: {isSubmitting ? '⏳' : '❌'}</li>
</ul>
</div>
<button
type='submit'
disabled={isSubmitting || !isValid}
style={{
width: '100%',
padding: '16px',
backgroundColor: isSubmitting || !isValid ? '#ccc' : '#4caf50',
color: 'white',
border: 'none',
borderRadius: '4px',
fontSize: '18px',
fontWeight: 'bold',
cursor: isSubmitting || !isValid ? 'not-allowed' : 'pointer',
}}
>
{isSubmitting ? 'Processing...' : 'Complete Order'}
</button>
</div>
);
}
export default CheckoutForm;
/*
useFormContext Benefits:
✅ No Props Drilling:
- Don't need to pass register, errors, etc. through every level
- Clean component APIs
- Easier refactoring
✅ Reusable Components:
- FormField can be used anywhere
- Access form context automatically
- Consistent behavior
✅ Better Separation of Concerns:
- Each section focuses on its fields
- Form state managed at top level
- Easy to test individual sections
Pattern:
1. Parent: <FormProvider {...methods}>
2. Children: const { register, ... } = useFormContext()
3. No manual prop passing!
When to use:
✅ Large forms with multiple sections
✅ Deeply nested components
✅ Reusable field components
❌ Simple forms (overkill)
❌ Non-form related data (use normal props/context)
*/Demo 3: useWatch - Performance Optimization ⭐⭐⭐
Optimized field watching without parent re-renders
💡 Code Example
jsx
/**
* useWatch Demo - Performance Comparison
*
* Demonstrates:
* - watch() vs useWatch() performance
* - Isolated re-renders
* - Real-time calculations
*/
import { useForm, useWatch } from 'react-hook-form';
import { useState, memo } from 'react';
function PerformanceDemo() {
const { register, control, watch } = useForm({
defaultValues: {
product: '',
quantity: 1,
price: 0,
taxRate: 10,
discount: 0,
},
});
const [parentRenderCount, setParentRenderCount] = useState(0);
// Track parent renders
useState(() => {
setParentRenderCount((prev) => prev + 1);
});
return (
<div style={{ maxWidth: '1000px', padding: '20px' }}>
<h1>watch() vs useWatch() Performance</h1>
<div
style={{
padding: '16px',
backgroundColor: '#ffebee',
borderRadius: '8px',
marginBottom: '24px',
}}
>
<strong>Parent Component Render Count: {parentRenderCount}</strong>
<p style={{ margin: '8px 0 0 0', fontSize: '14px' }}>
Watch how this counter increases differently with watch() vs
useWatch()
</p>
</div>
<div
style={{
display: 'grid',
gridTemplateColumns: '1fr 1fr',
gap: '24px',
}}
>
{/* LEFT: Using watch() */}
<div
style={{
padding: '20px',
backgroundColor: '#ffebee',
borderRadius: '8px',
border: '2px solid #f44336',
}}
>
<h2>❌ Using watch()</h2>
<p style={{ fontSize: '14px', color: '#666' }}>
Re-renders PARENT on every change
</p>
<PriceCalculatorWithWatch
control={control}
watch={watch}
/>
</div>
{/* RIGHT: Using useWatch() */}
<div
style={{
padding: '20px',
backgroundColor: '#e8f5e9',
borderRadius: '8px',
border: '2px solid #4caf50',
}}
>
<h2>✅ Using useWatch()</h2>
<p style={{ fontSize: '14px', color: '#666' }}>
Only re-renders this component
</p>
<PriceCalculatorWithUseWatch control={control} />
</div>
</div>
{/* Form Inputs (shared) */}
<div
style={{
marginTop: '24px',
padding: '20px',
backgroundColor: '#f9f9f9',
borderRadius: '8px',
}}
>
<h3>Product Details (type here to see difference)</h3>
<div
style={{
display: 'grid',
gridTemplateColumns: 'repeat(5, 1fr)',
gap: '12px',
}}
>
<div>
<label
style={{
display: 'block',
marginBottom: '4px',
fontSize: '14px',
}}
>
Product
</label>
<input
{...register('product')}
placeholder='Enter product'
style={{
width: '100%',
padding: '8px',
borderRadius: '4px',
border: '1px solid #ccc',
}}
/>
</div>
<div>
<label
style={{
display: 'block',
marginBottom: '4px',
fontSize: '14px',
}}
>
Quantity
</label>
<input
type='number'
{...register('quantity', { valueAsNumber: true })}
style={{
width: '100%',
padding: '8px',
borderRadius: '4px',
border: '1px solid #ccc',
}}
/>
</div>
<div>
<label
style={{
display: 'block',
marginBottom: '4px',
fontSize: '14px',
}}
>
Price ($)
</label>
<input
type='number'
step='0.01'
{...register('price', { valueAsNumber: true })}
style={{
width: '100%',
padding: '8px',
borderRadius: '4px',
border: '1px solid #ccc',
}}
/>
</div>
<div>
<label
style={{
display: 'block',
marginBottom: '4px',
fontSize: '14px',
}}
>
Tax (%)
</label>
<input
type='number'
{...register('taxRate', { valueAsNumber: true })}
style={{
width: '100%',
padding: '8px',
borderRadius: '4px',
border: '1px solid #ccc',
}}
/>
</div>
<div>
<label
style={{
display: 'block',
marginBottom: '4px',
fontSize: '14px',
}}
>
Discount ($)
</label>
<input
type='number'
step='0.01'
{...register('discount', { valueAsNumber: true })}
style={{
width: '100%',
padding: '8px',
borderRadius: '4px',
border: '1px solid #ccc',
}}
/>
</div>
</div>
</div>
{/* Explanation */}
<div
style={{
marginTop: '24px',
padding: '20px',
backgroundColor: '#e3f2fd',
borderRadius: '8px',
}}
>
<h3>📊 What's happening?</h3>
<ul style={{ margin: '8px 0', paddingLeft: '20px' }}>
<li>
<strong>watch():</strong> Every keystroke increases parent render
count (parent + both calculators re-render)
</li>
<li>
<strong>useWatch():</strong> Only the useWatch component re-renders
(parent counter stays low)
</li>
<li>
<strong>Result:</strong> useWatch() is much more performant for
large forms
</li>
</ul>
</div>
</div>
);
}
// ============================================
// CALCULATOR WITH watch() - Re-renders parent
// ============================================
function PriceCalculatorWithWatch({ control, watch }) {
const [renderCount, setRenderCount] = useState(0);
useState(() => {
setRenderCount((prev) => prev + 1);
});
// ❌ watch() causes parent component to re-render!
const quantity = watch('quantity');
const price = watch('price');
const taxRate = watch('taxRate');
const discount = watch('discount');
const subtotal = quantity * price;
const tax = subtotal * (taxRate / 100);
const total = subtotal + tax - discount;
return (
<div>
<div
style={{
padding: '12px',
backgroundColor: 'rgba(255, 255, 255, 0.5)',
borderRadius: '4px',
marginBottom: '12px',
fontWeight: 'bold',
color: '#c62828',
}}
>
Component Renders: {renderCount}
</div>
<CalculationDisplay
subtotal={subtotal}
tax={tax}
discount={discount}
total={total}
/>
</div>
);
}
// ============================================
// CALCULATOR WITH useWatch() - Isolated renders
// ============================================
function PriceCalculatorWithUseWatch({ control }) {
const [renderCount, setRenderCount] = useState(0);
useState(() => {
setRenderCount((prev) => prev + 1);
});
// ✅ useWatch() - Only THIS component re-renders!
const quantity = useWatch({ control, name: 'quantity' });
const price = useWatch({ control, name: 'price' });
const taxRate = useWatch({ control, name: 'taxRate' });
const discount = useWatch({ control, name: 'discount' });
const subtotal = quantity * price;
const tax = subtotal * (taxRate / 100);
const total = subtotal + tax - discount;
return (
<div>
<div
style={{
padding: '12px',
backgroundColor: 'rgba(255, 255, 255, 0.5)',
borderRadius: '4px',
marginBottom: '12px',
fontWeight: 'bold',
color: '#2e7d32',
}}
>
Component Renders: {renderCount}
</div>
<CalculationDisplay
subtotal={subtotal}
tax={tax}
discount={discount}
total={total}
/>
</div>
);
}
// ============================================
// SHARED DISPLAY COMPONENT
// ============================================
const CalculationDisplay = memo(({ subtotal, tax, discount, total }) => {
return (
<div style={{ fontSize: '14px' }}>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
marginBottom: '8px',
paddingBottom: '8px',
borderBottom: '1px solid rgba(0,0,0,0.1)',
}}
>
<span>Subtotal:</span>
<span>${subtotal.toFixed(2)}</span>
</div>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
marginBottom: '8px',
}}
>
<span>Tax:</span>
<span>${tax.toFixed(2)}</span>
</div>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
marginBottom: '8px',
paddingBottom: '8px',
borderBottom: '1px solid rgba(0,0,0,0.1)',
}}
>
<span>Discount:</span>
<span>-${discount.toFixed(2)}</span>
</div>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
fontSize: '18px',
fontWeight: 'bold',
}}
>
<span>Total:</span>
<span style={{ color: '#2196f3' }}>${total.toFixed(2)}</span>
</div>
</div>
);
});
export default PerformanceDemo;
/*
watch() vs useWatch():
watch():
❌ Re-renders parent component
❌ Re-renders ALL children
❌ Performance issue in large forms
✅ Simple API
✅ Good for small forms
useWatch():
✅ Isolated re-renders (only consumer)
✅ Better performance
✅ Recommended for large forms
❌ Slightly more verbose
❌ Need to pass control
When to use each:
watch():
- Small forms (< 10 fields)
- Need to watch in parent
- Performance not critical
useWatch():
- Large forms
- Many watchers
- Performance critical
- Nested components
Best Practice:
- Default to useWatch() for better performance
- Only use watch() when you need parent re-render
Syntax:
// watch()
const value = watch('fieldName');
const all = watch();
// useWatch()
const value = useWatch({ control, name: 'fieldName' });
const all = useWatch({ control }); // all fields
const multiple = useWatch({ control, name: ['field1', 'field2'] });
*/🔨 PHẦN 3: BÀI TẬP THỰC HÀNH (60 phút)
⭐ Bài 1: Basic useFieldArray - Skills List (15 phút)
🎯 Mục tiêu: Làm quen với useFieldArray
jsx
/**
* 🎯 Mục tiêu: Tạo danh sách skills động
* ⏱️ Thời gian: 15 phút
* 🚫 KHÔNG dùng: Zod (chưa học)
*
* Requirements:
* 1. Mỗi skill có: name, level (1-5), years experience
* 2. Minimum 1 skill required
* 3. Maximum 10 skills
* 4. Add/Remove buttons
* 5. Validation: name required, level 1-5, years ≥ 0
* 6. Display total years of experience
*
* 💡 Gợi ý:
* - Use useFieldArray with name: 'skills'
* - Default 1 empty skill
* - Use field.id as key
*/
// 🎯 NHIỆM VỤ CỦA BẠN:
// TODO: Implement SkillsForm với useFieldArray💡 Solution
jsx
/**
* Skills List Form - useFieldArray Solution
*/
import { useForm, useFieldArray } from 'react-hook-form';
function SkillsForm() {
const {
register,
control,
handleSubmit,
watch,
formState: { errors },
} = useForm({
defaultValues: {
skills: [{ name: '', level: 3, years: 0 }],
},
});
const { fields, append, remove } = useFieldArray({
control,
name: 'skills',
});
const watchSkills = watch('skills');
// Calculate total years
const totalYears = watchSkills.reduce((sum, skill) => {
return sum + (Number(skill.years) || 0);
}, 0);
const onSubmit = (data) => {
console.log('Skills:', data);
alert('Skills submitted! Check console.');
};
return (
<div style={{ maxWidth: '600px', padding: '20px' }}>
<h2>📚 Your Skills</h2>
<form onSubmit={handleSubmit(onSubmit)}>
{fields.map((field, index) => (
<div
key={field.id}
style={{
padding: '16px',
marginBottom: '16px',
backgroundColor: '#f9f9f9',
borderRadius: '8px',
border: '1px solid #e0e0e0',
}}
>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
marginBottom: '12px',
}}
>
<h3 style={{ margin: 0 }}>Skill #{index + 1}</h3>
{fields.length > 1 && (
<button
type='button'
onClick={() => remove(index)}
style={{
padding: '4px 12px',
backgroundColor: '#f44336',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
fontSize: '14px',
}}
>
Remove
</button>
)}
</div>
{/* Skill Name */}
<div style={{ marginBottom: '12px' }}>
<label
style={{
display: 'block',
marginBottom: '4px',
fontSize: '14px',
}}
>
Skill Name *
</label>
<input
{...register(`skills.${index}.name`, {
required: 'Skill name is required',
})}
placeholder='e.g., React, TypeScript'
style={{
width: '100%',
padding: '8px',
border: errors.skills?.[index]?.name
? '2px solid red'
: '1px solid #ccc',
borderRadius: '4px',
}}
/>
{errors.skills?.[index]?.name && (
<span style={{ color: 'red', fontSize: '12px' }}>
{errors.skills[index].name.message}
</span>
)}
</div>
<div
style={{
display: 'grid',
gridTemplateColumns: '1fr 1fr',
gap: '12px',
}}
>
{/* Level */}
<div>
<label
style={{
display: 'block',
marginBottom: '4px',
fontSize: '14px',
}}
>
Level (1-5) *
</label>
<select
{...register(`skills.${index}.level`, {
required: 'Level is required',
valueAsNumber: true,
})}
style={{
width: '100%',
padding: '8px',
border: '1px solid #ccc',
borderRadius: '4px',
}}
>
<option value={1}>1 - Beginner</option>
<option value={2}>2 - Elementary</option>
<option value={3}>3 - Intermediate</option>
<option value={4}>4 - Advanced</option>
<option value={5}>5 - Expert</option>
</select>
</div>
{/* Years */}
<div>
<label
style={{
display: 'block',
marginBottom: '4px',
fontSize: '14px',
}}
>
Years of Experience *
</label>
<input
type='number'
step='0.5'
{...register(`skills.${index}.years`, {
required: 'Years required',
min: { value: 0, message: 'Min 0' },
max: { value: 50, message: 'Max 50' },
valueAsNumber: true,
})}
style={{
width: '100%',
padding: '8px',
border: errors.skills?.[index]?.years
? '2px solid red'
: '1px solid #ccc',
borderRadius: '4px',
}}
/>
{errors.skills?.[index]?.years && (
<span style={{ color: 'red', fontSize: '12px' }}>
{errors.skills[index].years.message}
</span>
)}
</div>
</div>
</div>
))}
{/* Add Skill Button */}
<button
type='button'
onClick={() => append({ name: '', level: 3, years: 0 })}
disabled={fields.length >= 10}
style={{
width: '100%',
padding: '12px',
backgroundColor: fields.length >= 10 ? '#ccc' : '#2196f3',
color: 'white',
border: 'none',
borderRadius: '4px',
marginBottom: '16px',
cursor: fields.length >= 10 ? 'not-allowed' : 'pointer',
}}
>
➕ Add Skill {fields.length >= 10 && '(Max 10)'}
</button>
{/* Summary */}
<div
style={{
padding: '16px',
backgroundColor: '#e3f2fd',
borderRadius: '8px',
marginBottom: '16px',
}}
>
<strong>Summary:</strong>
<ul style={{ margin: '8px 0', paddingLeft: '20px' }}>
<li>Total Skills: {fields.length}</li>
<li>Total Years of Experience: {totalYears.toFixed(1)}</li>
</ul>
</div>
{/* Submit */}
<button
type='submit'
style={{
width: '100%',
padding: '12px',
backgroundColor: '#4caf50',
color: 'white',
border: 'none',
borderRadius: '4px',
fontSize: '16px',
cursor: 'pointer',
}}
>
Submit Skills
</button>
</form>
</div>
);
}
/*
Kết quả:
✅ useFieldArray basic usage
✅ Add/remove items
✅ Field validation
✅ field.id as key
✅ Total calculation
*/⭐⭐ Bài 2: useFormContext - Multi-Section Survey (25 phút)
🎯 Mục tiêu: Share form state giữa components
jsx
/**
* 🎯 Mục tiêu: Survey form với nhiều sections
* ⏱️ Thời gian: 25 phút
*
* Requirements:
* 1. 3 sections: Demographics, Preferences, Feedback
* 2. Mỗi section là separate component
* 3. Use FormProvider + useFormContext
* 4. Shared FormField component
* 5. Progress indicator showing completion %
* 6. Submit button ở main component
*
* Sections:
* - Demographics: age, gender, occupation
* - Preferences: favoriteColor, hobbies (checkbox array), newsletter (yes/no)
* - Feedback: rating (1-5), comments (textarea, min 20 chars)
*
* 💡 Gợi ý:
* - Wrap form with <FormProvider {...methods}>
* - Each section uses useFormContext()
* - Create reusable FormField, FormSelect, FormTextarea components
*/
// 🎯 NHIỆM VỤ CỦA BẠN:
// TODO: Implement SurveyForm với useFormContext💡 Solution
jsx
/**
* Multi-Section Survey - useFormContext Solution
*/
import { useForm, FormProvider, useFormContext } from 'react-hook-form';
import { useMemo } from 'react';
// ============================================
// MAIN SURVEY COMPONENT
// ============================================
function SurveyForm() {
const methods = useForm({
mode: 'onBlur',
defaultValues: {
// Demographics
age: '',
gender: '',
occupation: '',
// Preferences
favoriteColor: '',
hobbies: [],
newsletter: '',
// Feedback
rating: '',
comments: '',
},
});
const watchAll = methods.watch();
// Calculate progress
const progress = useMemo(() => {
const fields = Object.keys(watchAll);
const filled = fields.filter((field) => {
const value = watchAll[field];
if (Array.isArray(value)) return value.length > 0;
return value !== '' && value !== null && value !== undefined;
});
return Math.round((filled.length / fields.length) * 100);
}, [watchAll]);
const onSubmit = (data) => {
console.log('Survey data:', data);
alert('Survey submitted! Check console.');
};
return (
<FormProvider {...methods}>
<form onSubmit={methods.handleSubmit(onSubmit)}>
<div style={{ maxWidth: '700px', padding: '20px' }}>
<h1>Customer Survey</h1>
{/* Progress Bar */}
<div style={{ marginBottom: '24px' }}>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
marginBottom: '4px',
}}
>
<span style={{ fontSize: '14px', fontWeight: 'bold' }}>
Progress: {progress}%
</span>
</div>
<div
style={{
width: '100%',
height: '8px',
backgroundColor: '#e0e0e0',
borderRadius: '4px',
overflow: 'hidden',
}}
>
<div
style={{
width: `${progress}%`,
height: '100%',
backgroundColor: progress === 100 ? '#4caf50' : '#2196f3',
transition: 'width 0.3s ease',
}}
/>
</div>
</div>
{/* Sections */}
<DemographicsSection />
<PreferencesSection />
<FeedbackSection />
{/* Submit */}
<button
type='submit'
disabled={methods.formState.isSubmitting || progress < 100}
style={{
width: '100%',
padding: '16px',
backgroundColor:
methods.formState.isSubmitting || progress < 100
? '#ccc'
: '#4caf50',
color: 'white',
border: 'none',
borderRadius: '4px',
fontSize: '18px',
fontWeight: 'bold',
cursor:
methods.formState.isSubmitting || progress < 100
? 'not-allowed'
: 'pointer',
}}
>
{methods.formState.isSubmitting ? 'Submitting...' : 'Submit Survey'}
</button>
</div>
</form>
</FormProvider>
);
}
// ============================================
// DEMOGRAPHICS SECTION
// ============================================
function DemographicsSection() {
return (
<section
style={{
marginBottom: '24px',
padding: '20px',
backgroundColor: '#f9f9f9',
borderRadius: '8px',
}}
>
<h2>👤 Demographics</h2>
<FormField
label='Age'
name='age'
type='number'
validation={{
required: 'Age is required',
min: { value: 18, message: 'Must be 18+' },
max: { value: 120, message: 'Invalid age' },
}}
/>
<FormSelect
label='Gender'
name='gender'
options={['Male', 'Female', 'Other', 'Prefer not to say']}
validation={{ required: 'Gender is required' }}
/>
<FormField
label='Occupation'
name='occupation'
validation={{ required: 'Occupation is required' }}
/>
</section>
);
}
// ============================================
// PREFERENCES SECTION
// ============================================
function PreferencesSection() {
const {
register,
formState: { errors },
} = useFormContext();
const hobbiesOptions = ['Reading', 'Sports', 'Gaming', 'Music', 'Travel'];
return (
<section
style={{
marginBottom: '24px',
padding: '20px',
backgroundColor: '#f9f9f9',
borderRadius: '8px',
}}
>
<h2>❤️ Preferences</h2>
<FormField
label='Favorite Color'
name='favoriteColor'
validation={{ required: 'Required' }}
/>
{/* Hobbies - Checkbox array */}
<div style={{ marginBottom: '16px' }}>
<label
style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}
>
Hobbies (select at least 1) *
</label>
<div
style={{
display: 'grid',
gridTemplateColumns: '1fr 1fr',
gap: '8px',
}}
>
{hobbiesOptions.map((hobby) => (
<label
key={hobby}
style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
>
<input
type='checkbox'
value={hobby}
{...register('hobbies', {
validate: (value) =>
(value && value.length > 0) || 'Select at least 1 hobby',
})}
/>
<span>{hobby}</span>
</label>
))}
</div>
{errors.hobbies && (
<span
style={{
color: 'red',
fontSize: '14px',
display: 'block',
marginTop: '4px',
}}
>
{errors.hobbies.message}
</span>
)}
</div>
<FormSelect
label='Subscribe to Newsletter?'
name='newsletter'
options={['Yes', 'No']}
validation={{ required: 'Please select' }}
/>
</section>
);
}
// ============================================
// FEEDBACK SECTION
// ============================================
function FeedbackSection() {
const {
register,
watch,
formState: { errors },
} = useFormContext();
const rating = watch('rating');
return (
<section
style={{
marginBottom: '24px',
padding: '20px',
backgroundColor: '#f9f9f9',
borderRadius: '8px',
}}
>
<h2>📝 Feedback</h2>
{/* Rating */}
<div style={{ marginBottom: '16px' }}>
<label
style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}
>
Overall Rating (1-5) *
</label>
<div style={{ display: 'flex', gap: '8px' }}>
{[1, 2, 3, 4, 5].map((num) => (
<label
key={num}
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '50px',
height: '50px',
backgroundColor: rating == num ? '#2196f3' : 'white',
color: rating == num ? 'white' : 'black',
border: '2px solid #2196f3',
borderRadius: '4px',
cursor: 'pointer',
fontSize: '20px',
fontWeight: 'bold',
}}
>
<input
type='radio'
value={num}
{...register('rating', {
required: 'Please select a rating',
})}
style={{ display: 'none' }}
/>
{num}
</label>
))}
</div>
{errors.rating && (
<span
style={{
color: 'red',
fontSize: '14px',
display: 'block',
marginTop: '4px',
}}
>
{errors.rating.message}
</span>
)}
</div>
<FormTextarea
label='Comments'
name='comments'
validation={{
required: 'Comments are required',
minLength: {
value: 20,
message: 'Please write at least 20 characters',
},
}}
rows={4}
/>
</section>
);
}
// ============================================
// REUSABLE FORM COMPONENTS
// ============================================
function FormField({ label, name, type = 'text', validation, ...props }) {
const {
register,
formState: { errors },
} = useFormContext();
return (
<div style={{ marginBottom: '16px' }}>
<label
style={{ display: 'block', marginBottom: '4px', fontWeight: 'bold' }}
>
{label}
{validation?.required && <span style={{ color: 'red' }}> *</span>}
</label>
<input
type={type}
{...register(name, validation)}
{...props}
style={{
width: '100%',
padding: '8px',
border: errors[name] ? '2px solid red' : '1px solid #ccc',
borderRadius: '4px',
}}
/>
{errors[name] && (
<span
style={{
color: 'red',
fontSize: '14px',
display: 'block',
marginTop: '4px',
}}
>
{errors[name].message}
</span>
)}
</div>
);
}
function FormSelect({ label, name, options, validation }) {
const {
register,
formState: { errors },
} = useFormContext();
return (
<div style={{ marginBottom: '16px' }}>
<label
style={{ display: 'block', marginBottom: '4px', fontWeight: 'bold' }}
>
{label}
{validation?.required && <span style={{ color: 'red' }}> *</span>}
</label>
<select
{...register(name, validation)}
style={{
width: '100%',
padding: '8px',
border: errors[name] ? '2px solid red' : '1px solid #ccc',
borderRadius: '4px',
}}
>
<option value=''>-- Select --</option>
{options.map((option) => (
<option
key={option}
value={option}
>
{option}
</option>
))}
</select>
{errors[name] && (
<span
style={{
color: 'red',
fontSize: '14px',
display: 'block',
marginTop: '4px',
}}
>
{errors[name].message}
</span>
)}
</div>
);
}
function FormTextarea({ label, name, validation, rows = 3 }) {
const {
register,
watch,
formState: { errors },
} = useFormContext();
const currentLength = watch(name)?.length || 0;
const minLength = validation?.minLength?.value;
return (
<div style={{ marginBottom: '16px' }}>
<label
style={{ display: 'block', marginBottom: '4px', fontWeight: 'bold' }}
>
{label}
{validation?.required && <span style={{ color: 'red' }}> *</span>}
</label>
<textarea
{...register(name, validation)}
rows={rows}
style={{
width: '100%',
padding: '8px',
border: errors[name] ? '2px solid red' : '1px solid #ccc',
borderRadius: '4px',
fontFamily: 'inherit',
resize: 'vertical',
}}
/>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
marginTop: '4px',
}}
>
{errors[name] && (
<span style={{ color: 'red', fontSize: '14px' }}>
{errors[name].message}
</span>
)}
{minLength && (
<span
style={{
fontSize: '14px',
color: currentLength < minLength ? '#f44336' : '#666',
marginLeft: 'auto',
}}
>
{currentLength} / {minLength}
</span>
)}
</div>
</div>
);
}
export default SurveyForm;
/*
Kết quả:
✅ FormProvider wrapping
✅ useFormContext in sections
✅ Reusable field components
✅ Progress tracking
✅ Clean component separation
✅ No props drilling
*/⭐⭐⭐ Bài 3: Nested Field Arrays - Education History (40 phút)
🎯 Mục tiêu: Field arrays với nested structures
jsx
/**
* 🎯 Mục tiêu: Education history với nested arrays
* ⏱️ Thời gian: 40 phút
*
* 📋 Requirements:
* - Mỗi education entry có:
* - School name
* - Degree
* - Start/End dates
* - Courses array (nested useFieldArray!)
*
* - Courses (nested array):
* - Course name
* - Grade (A-F)
* - Credits
*
* - Validation:
* - School, degree required
* - End date > start date
* - At least 1 course per education
* - Course name required
*
* - Features:
* - Add/remove education entries
* - Add/remove courses within each education
* - Calculate total credits
* - GPA calculator (A=4.0, B=3.0, etc.)
*
* 💡 Gợi ý:
* - Use 2 levels of useFieldArray
* - Outer: education entries
* - Inner: courses for each education
*/
// 🎯 NHIỆM VỤ CỦA BẠN:
// TODO: Implement EducationForm với nested useFieldArray💡 Solution
jsx
/**
* Education History - Nested useFieldArray Solution
*/
import { useForm, useFieldArray } from 'react-hook-form';
function EducationForm() {
const {
register,
control,
handleSubmit,
watch,
formState: { errors },
} = useForm({
defaultValues: {
education: [
{
school: '',
degree: '',
startDate: '',
endDate: '',
courses: [{ name: '', grade: 'A', credits: 3 }],
},
],
},
});
const {
fields: educationFields,
append: appendEducation,
remove: removeEducation,
} = useFieldArray({
control,
name: 'education',
});
const watchEducation = watch('education');
const onSubmit = (data) => {
console.log('Education data:', data);
alert('Education submitted! Check console.');
};
// Validate end date
const validateEndDate = (endDate, index) => {
const startDate = watchEducation[index]?.startDate;
if (!startDate || !endDate) return true;
return (
new Date(endDate) > new Date(startDate) ||
'End date must be after start date'
);
};
return (
<div style={{ maxWidth: '900px', padding: '20px' }}>
<h1>🎓 Education History</h1>
<form onSubmit={handleSubmit(onSubmit)}>
{educationFields.map((eduField, eduIndex) => (
<EducationEntry
key={eduField.id}
eduField={eduField}
eduIndex={eduIndex}
register={register}
control={control}
errors={errors}
watch={watch}
removeEducation={removeEducation}
canRemove={educationFields.length > 1}
validateEndDate={validateEndDate}
/>
))}
{/* Add Education Button */}
<button
type='button'
onClick={() =>
appendEducation({
school: '',
degree: '',
startDate: '',
endDate: '',
courses: [{ name: '', grade: 'A', credits: 3 }],
})
}
style={{
width: '100%',
padding: '12px',
backgroundColor: '#2196f3',
color: 'white',
border: 'none',
borderRadius: '4px',
marginBottom: '16px',
cursor: 'pointer',
fontSize: '16px',
}}
>
➕ Add Education
</button>
{/* Overall Summary */}
<OverallSummary education={watchEducation} />
{/* Submit */}
<button
type='submit'
style={{
width: '100%',
padding: '16px',
backgroundColor: '#4caf50',
color: 'white',
border: 'none',
borderRadius: '4px',
fontSize: '18px',
fontWeight: 'bold',
cursor: 'pointer',
}}
>
Submit Education History
</button>
</form>
</div>
);
}
// ============================================
// EDUCATION ENTRY COMPONENT
// ============================================
function EducationEntry({
eduField,
eduIndex,
register,
control,
errors,
watch,
removeEducation,
canRemove,
validateEndDate,
}) {
// Nested useFieldArray for courses
const {
fields: courseFields,
append: appendCourse,
remove: removeCourse,
} = useFieldArray({
control,
name: `education.${eduIndex}.courses`,
});
const watchCourses = watch(`education.${eduIndex}.courses`);
// Calculate GPA for this education
const gpa = calculateGPA(watchCourses);
const totalCredits = watchCourses.reduce(
(sum, c) => sum + (Number(c.credits) || 0),
0,
);
return (
<div
style={{
marginBottom: '32px',
padding: '24px',
backgroundColor: '#f5f5f5',
borderRadius: '12px',
border: '2px solid #e0e0e0',
}}
>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
marginBottom: '16px',
}}
>
<h2 style={{ margin: 0 }}>Education #{eduIndex + 1}</h2>
{canRemove && (
<button
type='button'
onClick={() => removeEducation(eduIndex)}
style={{
padding: '8px 16px',
backgroundColor: '#f44336',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
}}
>
Remove
</button>
)}
</div>
{/* School Info */}
<div
style={{
display: 'grid',
gridTemplateColumns: '2fr 1fr',
gap: '12px',
marginBottom: '12px',
}}
>
<div>
<label
style={{ display: 'block', marginBottom: '4px', fontSize: '14px' }}
>
School Name *
</label>
<input
{...register(`education.${eduIndex}.school`, {
required: 'School name is required',
})}
placeholder='University/School name'
style={{
width: '100%',
padding: '8px',
border: errors.education?.[eduIndex]?.school
? '2px solid red'
: '1px solid #ccc',
borderRadius: '4px',
}}
/>
{errors.education?.[eduIndex]?.school && (
<span style={{ color: 'red', fontSize: '12px' }}>
{errors.education[eduIndex].school.message}
</span>
)}
</div>
<div>
<label
style={{ display: 'block', marginBottom: '4px', fontSize: '14px' }}
>
Degree *
</label>
<input
{...register(`education.${eduIndex}.degree`, {
required: 'Degree is required',
})}
placeholder='e.g., Bachelor of Science'
style={{
width: '100%',
padding: '8px',
border: errors.education?.[eduIndex]?.degree
? '2px solid red'
: '1px solid #ccc',
borderRadius: '4px',
}}
/>
{errors.education?.[eduIndex]?.degree && (
<span style={{ color: 'red', fontSize: '12px' }}>
{errors.education[eduIndex].degree.message}
</span>
)}
</div>
</div>
{/* Dates */}
<div
style={{
display: 'grid',
gridTemplateColumns: '1fr 1fr',
gap: '12px',
marginBottom: '20px',
}}
>
<div>
<label
style={{ display: 'block', marginBottom: '4px', fontSize: '14px' }}
>
Start Date *
</label>
<input
type='date'
{...register(`education.${eduIndex}.startDate`, {
required: 'Start date required',
})}
style={{
width: '100%',
padding: '8px',
border: '1px solid #ccc',
borderRadius: '4px',
}}
/>
</div>
<div>
<label
style={{ display: 'block', marginBottom: '4px', fontSize: '14px' }}
>
End Date *
</label>
<input
type='date'
{...register(`education.${eduIndex}.endDate`, {
required: 'End date required',
validate: (value) => validateEndDate(value, eduIndex),
})}
style={{
width: '100%',
padding: '8px',
border: errors.education?.[eduIndex]?.endDate
? '2px solid red'
: '1px solid #ccc',
borderRadius: '4px',
}}
/>
{errors.education?.[eduIndex]?.endDate && (
<span style={{ color: 'red', fontSize: '12px' }}>
{errors.education[eduIndex].endDate.message}
</span>
)}
</div>
</div>
{/* Courses Section */}
<div
style={{
padding: '16px',
backgroundColor: 'white',
borderRadius: '8px',
marginBottom: '12px',
}}
>
<h3 style={{ marginTop: 0 }}>📚 Courses</h3>
{courseFields.map((courseField, courseIndex) => (
<div
key={courseField.id}
style={{
padding: '12px',
backgroundColor: '#f9f9f9',
borderRadius: '4px',
marginBottom: '12px',
border: '1px solid #e0e0e0',
}}
>
<div
style={{
display: 'grid',
gridTemplateColumns: '2fr 1fr 1fr auto',
gap: '8px',
alignItems: 'end',
}}
>
{/* Course Name */}
<div>
<label
style={{
display: 'block',
marginBottom: '4px',
fontSize: '12px',
}}
>
Course Name *
</label>
<input
{...register(
`education.${eduIndex}.courses.${courseIndex}.name`,
{
required: 'Course name required',
},
)}
placeholder='e.g., Data Structures'
style={{
width: '100%',
padding: '6px',
border: errors.education?.[eduIndex]?.courses?.[courseIndex]
?.name
? '2px solid red'
: '1px solid #ccc',
borderRadius: '4px',
fontSize: '14px',
}}
/>
</div>
{/* Grade */}
<div>
<label
style={{
display: 'block',
marginBottom: '4px',
fontSize: '12px',
}}
>
Grade
</label>
<select
{...register(
`education.${eduIndex}.courses.${courseIndex}.grade`,
)}
style={{
width: '100%',
padding: '6px',
border: '1px solid #ccc',
borderRadius: '4px',
fontSize: '14px',
}}
>
<option value='A'>A (4.0)</option>
<option value='B'>B (3.0)</option>
<option value='C'>C (2.0)</option>
<option value='D'>D (1.0)</option>
<option value='F'>F (0.0)</option>
</select>
</div>
{/* Credits */}
<div>
<label
style={{
display: 'block',
marginBottom: '4px',
fontSize: '12px',
}}
>
Credits
</label>
<input
type='number'
{...register(
`education.${eduIndex}.courses.${courseIndex}.credits`,
{
required: true,
min: 1,
max: 10,
valueAsNumber: true,
},
)}
style={{
width: '100%',
padding: '6px',
border: '1px solid #ccc',
borderRadius: '4px',
fontSize: '14px',
}}
/>
</div>
{/* Remove Button */}
{courseFields.length > 1 && (
<button
type='button'
onClick={() => removeCourse(courseIndex)}
style={{
padding: '6px 12px',
backgroundColor: '#f44336',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
fontSize: '12px',
}}
>
✕
</button>
)}
</div>
</div>
))}
{/* Add Course Button */}
<button
type='button'
onClick={() => appendCourse({ name: '', grade: 'A', credits: 3 })}
style={{
width: '100%',
padding: '8px',
backgroundColor: '#2196f3',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
fontSize: '14px',
}}
>
+ Add Course
</button>
</div>
{/* Summary for this education */}
<div
style={{
padding: '12px',
backgroundColor: '#e3f2fd',
borderRadius: '4px',
display: 'flex',
justifyContent: 'space-between',
}}
>
<span>
<strong>Total Credits:</strong> {totalCredits}
</span>
<span>
<strong>GPA:</strong> {gpa.toFixed(2)}
</span>
</div>
</div>
);
}
// ============================================
// OVERALL SUMMARY
// ============================================
function OverallSummary({ education }) {
const allCourses = education.flatMap((edu) => edu.courses || []);
const overallGPA = calculateGPA(allCourses);
const totalCredits = allCourses.reduce(
(sum, c) => sum + (Number(c.credits) || 0),
0,
);
return (
<div
style={{
padding: '20px',
backgroundColor: '#e8f5e9',
borderRadius: '8px',
marginBottom: '16px',
}}
>
<h3 style={{ marginTop: 0 }}>📊 Overall Summary</h3>
<div
style={{
display: 'grid',
gridTemplateColumns: '1fr 1fr 1fr',
gap: '16px',
}}
>
<div>
<div style={{ fontSize: '14px', color: '#666' }}>
Total Education Entries
</div>
<div style={{ fontSize: '24px', fontWeight: 'bold' }}>
{education.length}
</div>
</div>
<div>
<div style={{ fontSize: '14px', color: '#666' }}>Total Credits</div>
<div style={{ fontSize: '24px', fontWeight: 'bold' }}>
{totalCredits}
</div>
</div>
<div>
<div style={{ fontSize: '14px', color: '#666' }}>Overall GPA</div>
<div
style={{ fontSize: '24px', fontWeight: 'bold', color: '#2196f3' }}
>
{overallGPA.toFixed(2)}
</div>
</div>
</div>
</div>
);
}
// ============================================
// HELPER FUNCTIONS
// ============================================
function calculateGPA(courses) {
if (!courses || courses.length === 0) return 0;
const gradePoints = {
A: 4.0,
B: 3.0,
C: 2.0,
D: 1.0,
F: 0.0,
};
let totalPoints = 0;
let totalCredits = 0;
courses.forEach((course) => {
const credits = Number(course.credits) || 0;
const points = gradePoints[course.grade] || 0;
totalPoints += points * credits;
totalCredits += credits;
});
return totalCredits > 0 ? totalPoints / totalCredits : 0;
}
export default EducationForm;
/*
Kết quả:
✅ Nested useFieldArray (education + courses)
✅ Add/remove at both levels
✅ Cross-field validation (dates)
✅ GPA calculation
✅ Credits tracking
✅ Complex nested structure handling
*/⭐⭐⭐⭐ Bài 4: Advanced Form Architecture - Job Portal (60 phút)
🎯 Mục tiêu: Thiết kế kiến trúc form phức tạp với nhiều patterns
jsx
/**
* 🎯 Mục tiêu: Job posting form cho recruitment platform
* ⏱️ Thời gian: 60 phút
*
* 🏗️ PHASE 1: Research & Design (20 phút)
*
* Scenario: HR platform cần form để post job
*
* Requirements:
* 1. Form Sections:
* - Basic Info (title, company, location, type)
* - Job Description (editor-like textarea với preview)
* - Requirements (skills array, experience years, education)
* - Salary & Benefits (range, currency, benefits checklist)
* - Questions (custom screening questions array)
*
* 2. Advanced Features:
* - Auto-save draft every 30s
* - Rich validation (salary min < max, etc.)
* - Conditional fields (remote job → no location required)
* - Preview mode
* - Duplicate job feature
*
* 3. Architecture Decisions:
* - FormProvider cho nested components?
* - useWatch cho performance?
* - Custom hooks cho reusable logic?
* - Error recovery strategy?
*
* ADR Template:
* - Context: Complex job posting form
* - Decision: [Your architecture choice]
* - Rationale: [Why this approach?]
* - Consequences: [Trade-offs]
* - Alternatives: [Other options considered]
*
* 💻 PHASE 2: Implementation (30 phút)
*
* 🧪 PHASE 3: Testing (10 phút)
* - Manual test all features
* - Edge cases verification
*/💡 Solution
jsx
/**
* Job Posting Form - Advanced Architecture
*
* ADR (Architecture Decision Record)
* ===================================
*
* Context:
* Complex job posting form with:
* - 20+ fields across 5 sections
* - Dynamic arrays (skills, questions)
* - Conditional logic
* - Auto-save requirement
* - Preview functionality
*
* Decision: Hybrid Architecture
* - FormProvider for form state sharing
* - useWatch for preview (performance)
* - Custom hooks for auto-save and validation
* - Section components for organization
*
* Rationale:
* 1. FormProvider: Avoid prop drilling in nested sections
* 2. useWatch: Preview doesn't re-render entire form
* 3. Custom hooks: Reusable auto-save, validation logic
* 4. Sections: Maintainability and code organization
*
* Consequences:
* ✅ Clean code structure
* ✅ Good performance
* ✅ Easy to maintain
* ✅ Testable sections
* ❌ More initial setup complexity
* ❌ Need to understand Context + hooks
*
* Alternatives Considered:
* 1. Single monolithic component
* - Rejected: Hard to maintain, poor organization
* 2. Props drilling everywhere
* - Rejected: Too verbose, hard to refactor
* 3. Global state (Redux/Zustand)
* - Rejected: Overkill for form-only state
*/
import {
useForm,
FormProvider,
useFormContext,
useFieldArray,
useWatch,
} from 'react-hook-form';
import { useState, useEffect, useCallback } from 'react';
const DRAFT_KEY = 'job_posting_draft';
// ============================================
// CUSTOM HOOKS
// ============================================
// Auto-save hook
function useAutoSave(formValues, delay = 30000) {
const [lastSaved, setLastSaved] = useState(null);
const [isSaving, setIsSaving] = useState(false);
useEffect(() => {
setIsSaving(true);
const timeoutId = setTimeout(() => {
try {
localStorage.setItem(DRAFT_KEY, JSON.stringify(formValues));
setLastSaved(new Date());
setIsSaving(false);
} catch (error) {
console.error('Auto-save failed:', error);
setIsSaving(false);
}
}, 1000); // Debounce 1s
return () => clearTimeout(timeoutId);
}, [formValues, delay]);
return { lastSaved, isSaving };
}
// Load draft hook
function useLoadDraft() {
return useCallback(() => {
try {
const draft = localStorage.getItem(DRAFT_KEY);
return draft ? JSON.parse(draft) : getDefaultValues();
} catch {
return getDefaultValues();
}
}, []);
}
// ============================================
// MAIN FORM COMPONENT
// ============================================
function JobPostingForm() {
const loadDraft = useLoadDraft();
const [showPreview, setShowPreview] = useState(false);
const methods = useForm({
mode: 'onBlur',
defaultValues: loadDraft(),
});
const formValues = methods.watch();
const { lastSaved, isSaving } = useAutoSave(formValues);
const onSubmit = (data) => {
console.log('Job posting:', data);
alert('Job posted successfully!');
localStorage.removeItem(DRAFT_KEY);
methods.reset(getDefaultValues());
};
const clearDraft = () => {
if (window.confirm('Clear draft and start over?')) {
localStorage.removeItem(DRAFT_KEY);
methods.reset(getDefaultValues());
}
};
const duplicateJob = () => {
const currentValues = methods.getValues();
methods.reset({
...currentValues,
title: `${currentValues.title} (Copy)`,
// Reset arrays to avoid reference issues
skills: [...currentValues.skills],
questions: [...currentValues.questions],
});
};
if (showPreview) {
return (
<JobPreview
data={formValues}
onBack={() => setShowPreview(false)}
/>
);
}
return (
<FormProvider {...methods}>
<form onSubmit={methods.handleSubmit(onSubmit)}>
<div style={{ maxWidth: '1000px', margin: '0 auto', padding: '20px' }}>
{/* Header */}
<div
style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: '24px',
}}
>
<h1>Post a Job</h1>
<div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
{lastSaved && (
<span style={{ fontSize: '14px', color: '#666' }}>
{isSaving
? '💾 Saving...'
: `✓ Saved ${formatTime(lastSaved)}`}
</span>
)}
<button
type='button'
onClick={() => setShowPreview(true)}
style={{
padding: '8px 16px',
backgroundColor: '#2196f3',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
}}
>
👁️ Preview
</button>
<button
type='button'
onClick={duplicateJob}
style={{
padding: '8px 16px',
backgroundColor: '#9c27b0',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
}}
>
📋 Duplicate
</button>
<button
type='button'
onClick={clearDraft}
style={{
padding: '8px 16px',
backgroundColor: '#f44336',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
}}
>
🗑️ Clear
</button>
</div>
</div>
{/* Sections */}
<BasicInfoSection />
<JobDescriptionSection />
<RequirementsSection />
<SalaryBenefitsSection />
<ScreeningQuestionsSection />
{/* Submit */}
<div
style={{
display: 'flex',
gap: '12px',
marginTop: '32px',
}}
>
<button
type='submit'
disabled={
methods.formState.isSubmitting || !methods.formState.isValid
}
style={{
flex: 1,
padding: '16px',
backgroundColor:
methods.formState.isSubmitting || !methods.formState.isValid
? '#ccc'
: '#4caf50',
color: 'white',
border: 'none',
borderRadius: '4px',
fontSize: '18px',
fontWeight: 'bold',
cursor:
methods.formState.isSubmitting || !methods.formState.isValid
? 'not-allowed'
: 'pointer',
}}
>
{methods.formState.isSubmitting ? 'Posting...' : 'Post Job'}
</button>
</div>
</div>
</form>
</FormProvider>
);
}
// ============================================
// SECTION 1: BASIC INFO
// ============================================
function BasicInfoSection() {
const {
register,
watch,
formState: { errors },
} = useFormContext();
const jobType = watch('jobType');
const isRemote = jobType === 'Remote';
return (
<section
style={{
marginBottom: '24px',
padding: '20px',
backgroundColor: '#f9f9f9',
borderRadius: '8px',
}}
>
<h2>📋 Basic Information</h2>
<div
style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: '12px' }}
>
<div>
<label
style={{
display: 'block',
marginBottom: '4px',
fontWeight: 'bold',
}}
>
Job Title *
</label>
<input
{...register('title', { required: 'Job title is required' })}
placeholder='e.g., Senior React Developer'
style={{
width: '100%',
padding: '8px',
border: errors.title ? '2px solid red' : '1px solid #ccc',
borderRadius: '4px',
}}
/>
{errors.title && (
<span style={{ color: 'red', fontSize: '14px' }}>
{errors.title.message}
</span>
)}
</div>
<div>
<label
style={{
display: 'block',
marginBottom: '4px',
fontWeight: 'bold',
}}
>
Job Type *
</label>
<select
{...register('jobType', { required: 'Job type is required' })}
style={{
width: '100%',
padding: '8px',
border: '1px solid #ccc',
borderRadius: '4px',
}}
>
<option value=''>-- Select --</option>
<option value='Full-time'>Full-time</option>
<option value='Part-time'>Part-time</option>
<option value='Contract'>Contract</option>
<option value='Remote'>Remote</option>
</select>
{errors.jobType && (
<span style={{ color: 'red', fontSize: '14px' }}>
{errors.jobType.message}
</span>
)}
</div>
</div>
<div
style={{
display: 'grid',
gridTemplateColumns: '1fr 1fr',
gap: '12px',
marginTop: '12px',
}}
>
<div>
<label
style={{
display: 'block',
marginBottom: '4px',
fontWeight: 'bold',
}}
>
Company *
</label>
<input
{...register('company', { required: 'Company name is required' })}
placeholder='Company name'
style={{
width: '100%',
padding: '8px',
border: errors.company ? '2px solid red' : '1px solid #ccc',
borderRadius: '4px',
}}
/>
{errors.company && (
<span style={{ color: 'red', fontSize: '14px' }}>
{errors.company.message}
</span>
)}
</div>
<div>
<label
style={{
display: 'block',
marginBottom: '4px',
fontWeight: 'bold',
}}
>
Location {!isRemote && '*'}
</label>
<input
{...register('location', {
required: isRemote
? false
: 'Location is required for non-remote jobs',
})}
placeholder={isRemote ? 'Not required for remote' : 'City, Country'}
disabled={isRemote}
style={{
width: '100%',
padding: '8px',
border: errors.location ? '2px solid red' : '1px solid #ccc',
borderRadius: '4px',
backgroundColor: isRemote ? '#f5f5f5' : 'white',
}}
/>
{errors.location && (
<span style={{ color: 'red', fontSize: '14px' }}>
{errors.location.message}
</span>
)}
</div>
</div>
</section>
);
}
// ============================================
// SECTION 2: JOB DESCRIPTION
// ============================================
function JobDescriptionSection() {
const {
register,
watch,
formState: { errors },
} = useFormContext();
const description = watch('description');
const charCount = description?.length || 0;
return (
<section
style={{
marginBottom: '24px',
padding: '20px',
backgroundColor: '#f9f9f9',
borderRadius: '8px',
}}
>
<h2>📝 Job Description</h2>
<div>
<label
style={{ display: 'block', marginBottom: '4px', fontWeight: 'bold' }}
>
Description * (Min 100 characters)
</label>
<textarea
{...register('description', {
required: 'Job description is required',
minLength: {
value: 100,
message: 'Description must be at least 100 characters',
},
})}
rows={8}
placeholder='Describe the role, responsibilities, and what makes this position exciting...'
style={{
width: '100%',
padding: '12px',
border: errors.description ? '2px solid red' : '1px solid #ccc',
borderRadius: '4px',
fontFamily: 'inherit',
fontSize: '14px',
resize: 'vertical',
}}
/>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
marginTop: '4px',
}}
>
{errors.description && (
<span style={{ color: 'red', fontSize: '14px' }}>
{errors.description.message}
</span>
)}
<span
style={{
fontSize: '14px',
color: charCount < 100 ? '#f44336' : '#666',
marginLeft: 'auto',
}}
>
{charCount} / 100 characters
</span>
</div>
</div>
</section>
);
}
// ============================================
// SECTION 3: REQUIREMENTS
// ============================================
function RequirementsSection() {
const {
register,
control,
formState: { errors },
} = useFormContext();
const { fields, append, remove } = useFieldArray({
control,
name: 'skills',
});
return (
<section
style={{
marginBottom: '24px',
padding: '20px',
backgroundColor: '#f9f9f9',
borderRadius: '8px',
}}
>
<h2>✅ Requirements</h2>
<div
style={{
display: 'grid',
gridTemplateColumns: '1fr 1fr',
gap: '12px',
marginBottom: '16px',
}}
>
<div>
<label
style={{
display: 'block',
marginBottom: '4px',
fontWeight: 'bold',
}}
>
Years of Experience *
</label>
<input
type='number'
{...register('yearsExperience', {
required: 'Required',
min: { value: 0, message: 'Min 0' },
max: { value: 50, message: 'Max 50' },
valueAsNumber: true,
})}
style={{
width: '100%',
padding: '8px',
border: errors.yearsExperience
? '2px solid red'
: '1px solid #ccc',
borderRadius: '4px',
}}
/>
{errors.yearsExperience && (
<span style={{ color: 'red', fontSize: '14px' }}>
{errors.yearsExperience.message}
</span>
)}
</div>
<div>
<label
style={{
display: 'block',
marginBottom: '4px',
fontWeight: 'bold',
}}
>
Education Level *
</label>
<select
{...register('education', { required: 'Required' })}
style={{
width: '100%',
padding: '8px',
border: '1px solid #ccc',
borderRadius: '4px',
}}
>
<option value=''>-- Select --</option>
<option value='High School'>High School</option>
<option value='Bachelor'>Bachelor's Degree</option>
<option value='Master'>Master's Degree</option>
<option value='PhD'>PhD</option>
</select>
</div>
</div>
{/* Skills Array */}
<div>
<label
style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}
>
Required Skills * (At least 1)
</label>
{fields.map((field, index) => (
<div
key={field.id}
style={{
display: 'flex',
gap: '8px',
marginBottom: '8px',
}}
>
<input
{...register(`skills.${index}.name`, {
required: 'Skill name required',
})}
placeholder='e.g., React, TypeScript'
style={{
flex: 1,
padding: '8px',
border: errors.skills?.[index]?.name
? '2px solid red'
: '1px solid #ccc',
borderRadius: '4px',
}}
/>
<select
{...register(`skills.${index}.level`)}
style={{
width: '150px',
padding: '8px',
border: '1px solid #ccc',
borderRadius: '4px',
}}
>
<option value='Required'>Required</option>
<option value='Preferred'>Preferred</option>
</select>
{fields.length > 1 && (
<button
type='button'
onClick={() => remove(index)}
style={{
padding: '8px 12px',
backgroundColor: '#f44336',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
}}
>
✕
</button>
)}
</div>
))}
<button
type='button'
onClick={() => append({ name: '', level: 'Required' })}
style={{
padding: '8px 16px',
backgroundColor: '#2196f3',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
fontSize: '14px',
}}
>
+ Add Skill
</button>
</div>
</section>
);
}
// ============================================
// SECTION 4: SALARY & BENEFITS
// ============================================
function SalaryBenefitsSection() {
const {
register,
watch,
formState: { errors },
} = useFormContext();
const salaryMin = watch('salaryMin');
const salaryMax = watch('salaryMax');
const validateSalaryMax = (value) => {
if (!salaryMin || !value) return true;
return Number(value) > Number(salaryMin) || 'Max must be greater than min';
};
return (
<section
style={{
marginBottom: '24px',
padding: '20px',
backgroundColor: '#f9f9f9',
borderRadius: '8px',
}}
>
<h2>💰 Salary & Benefits</h2>
<div
style={{
display: 'grid',
gridTemplateColumns: '1fr 1fr 1fr',
gap: '12px',
marginBottom: '16px',
}}
>
<div>
<label
style={{
display: 'block',
marginBottom: '4px',
fontWeight: 'bold',
}}
>
Salary Min ($) *
</label>
<input
type='number'
step='1000'
{...register('salaryMin', {
required: 'Required',
min: { value: 0, message: 'Min 0' },
valueAsNumber: true,
})}
style={{
width: '100%',
padding: '8px',
border: errors.salaryMin ? '2px solid red' : '1px solid #ccc',
borderRadius: '4px',
}}
/>
{errors.salaryMin && (
<span style={{ color: 'red', fontSize: '14px' }}>
{errors.salaryMin.message}
</span>
)}
</div>
<div>
<label
style={{
display: 'block',
marginBottom: '4px',
fontWeight: 'bold',
}}
>
Salary Max ($) *
</label>
<input
type='number'
step='1000'
{...register('salaryMax', {
required: 'Required',
min: { value: 0, message: 'Min 0' },
validate: validateSalaryMax,
valueAsNumber: true,
})}
style={{
width: '100%',
padding: '8px',
border: errors.salaryMax ? '2px solid red' : '1px solid #ccc',
borderRadius: '4px',
}}
/>
{errors.salaryMax && (
<span style={{ color: 'red', fontSize: '14px' }}>
{errors.salaryMax.message}
</span>
)}
</div>
<div>
<label
style={{
display: 'block',
marginBottom: '4px',
fontWeight: 'bold',
}}
>
Currency *
</label>
<select
{...register('currency', { required: 'Required' })}
style={{
width: '100%',
padding: '8px',
border: '1px solid #ccc',
borderRadius: '4px',
}}
>
<option value='USD'>USD ($)</option>
<option value='EUR'>EUR (€)</option>
<option value='GBP'>GBP (£)</option>
<option value='VND'>VND (₫)</option>
</select>
</div>
</div>
{/* Benefits */}
<div>
<label
style={{ display: 'block', marginBottom: '8px', fontWeight: 'bold' }}
>
Benefits
</label>
<div
style={{
display: 'grid',
gridTemplateColumns: '1fr 1fr',
gap: '8px',
}}
>
{[
'Health Insurance',
'Dental Insurance',
'Vision Insurance',
'401(k)',
'Paid Time Off',
'Remote Work',
'Flexible Hours',
'Stock Options',
].map((benefit) => (
<label
key={benefit}
style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
>
<input
type='checkbox'
value={benefit}
{...register('benefits')}
/>
<span>{benefit}</span>
</label>
))}
</div>
</div>
</section>
);
}
// ============================================
// SECTION 5: SCREENING QUESTIONS
// ============================================
function ScreeningQuestionsSection() {
const {
register,
control,
formState: { errors },
} = useFormContext();
const { fields, append, remove } = useFieldArray({
control,
name: 'questions',
});
return (
<section
style={{
marginBottom: '24px',
padding: '20px',
backgroundColor: '#f9f9f9',
borderRadius: '8px',
}}
>
<h2>❓ Screening Questions</h2>
<p style={{ color: '#666', fontSize: '14px' }}>
Add custom questions to screen candidates (optional)
</p>
{fields.map((field, index) => (
<div
key={field.id}
style={{
padding: '12px',
backgroundColor: 'white',
borderRadius: '4px',
marginBottom: '12px',
border: '1px solid #e0e0e0',
}}
>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
marginBottom: '8px',
}}
>
<strong>Question #{index + 1}</strong>
<button
type='button'
onClick={() => remove(index)}
style={{
padding: '4px 12px',
backgroundColor: '#f44336',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
fontSize: '12px',
}}
>
Remove
</button>
</div>
<input
{...register(`questions.${index}.question`, {
required: 'Question text required',
})}
placeholder='Enter your question...'
style={{
width: '100%',
padding: '8px',
border: errors.questions?.[index]?.question
? '2px solid red'
: '1px solid #ccc',
borderRadius: '4px',
marginBottom: '8px',
}}
/>
<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
<label
style={{ display: 'flex', alignItems: 'center', gap: '4px' }}
>
<input
type='checkbox'
{...register(`questions.${index}.required`)}
/>
<span style={{ fontSize: '14px' }}>Required</span>
</label>
<select
{...register(`questions.${index}.type`)}
style={{
padding: '6px',
border: '1px solid #ccc',
borderRadius: '4px',
fontSize: '14px',
}}
>
<option value='text'>Text Answer</option>
<option value='yesno'>Yes/No</option>
<option value='number'>Number</option>
</select>
</div>
</div>
))}
<button
type='button'
onClick={() => append({ question: '', required: false, type: 'text' })}
style={{
width: '100%',
padding: '12px',
backgroundColor: '#2196f3',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
}}
>
+ Add Question
</button>
</section>
);
}
// ============================================
// PREVIEW COMPONENT
// ============================================
function JobPreview({ data, onBack }) {
return (
<div style={{ maxWidth: '800px', margin: '0 auto', padding: '20px' }}>
<button
onClick={onBack}
style={{
marginBottom: '20px',
padding: '8px 16px',
backgroundColor: '#2196f3',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
}}
>
← Back to Edit
</button>
<div
style={{
padding: '32px',
backgroundColor: 'white',
borderRadius: '8px',
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
}}
>
<h1>{data.title || 'Untitled Job'}</h1>
<div style={{ color: '#666', marginBottom: '24px' }}>
{data.company} • {data.location || 'Remote'} • {data.jobType}
</div>
<div style={{ marginBottom: '24px' }}>
<h3>About the Role</h3>
<p style={{ whiteSpace: 'pre-wrap' }}>
{data.description || 'No description provided.'}
</p>
</div>
<div style={{ marginBottom: '24px' }}>
<h3>Requirements</h3>
<ul>
<li>Years of Experience: {data.yearsExperience || 0}</li>
<li>Education: {data.education || 'Not specified'}</li>
</ul>
{data.skills && data.skills.length > 0 && (
<>
<h4>Skills:</h4>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
{data.skills.map((skill, i) => (
<span
key={i}
style={{
padding: '4px 12px',
backgroundColor:
skill.level === 'Required' ? '#2196f3' : '#9e9e9e',
color: 'white',
borderRadius: '16px',
fontSize: '14px',
}}
>
{skill.name} ({skill.level})
</span>
))}
</div>
</>
)}
</div>
<div style={{ marginBottom: '24px' }}>
<h3>Compensation</h3>
<p style={{ fontSize: '20px', fontWeight: 'bold', color: '#4caf50' }}>
{data.currency} ${data.salaryMin?.toLocaleString()} - $
{data.salaryMax?.toLocaleString()}
</p>
{data.benefits && data.benefits.length > 0 && (
<>
<h4>Benefits:</h4>
<ul>
{data.benefits.map((benefit, i) => (
<li key={i}>{benefit}</li>
))}
</ul>
</>
)}
</div>
{data.questions && data.questions.length > 0 && (
<div>
<h3>Screening Questions</h3>
{data.questions.map((q, i) => (
<div
key={i}
style={{
padding: '12px',
backgroundColor: '#f9f9f9',
borderRadius: '4px',
marginBottom: '8px',
}}
>
<strong>
{i + 1}. {q.question}
</strong>
{q.required && <span style={{ color: 'red' }}> *</span>}
<div
style={{ fontSize: '12px', color: '#666', marginTop: '4px' }}
>
Type: {q.type}
</div>
</div>
))}
</div>
)}
</div>
</div>
);
}
// ============================================
// HELPER FUNCTIONS
// ============================================
function getDefaultValues() {
return {
title: '',
company: '',
location: '',
jobType: '',
description: '',
yearsExperience: 0,
education: '',
skills: [{ name: '', level: 'Required' }],
salaryMin: 0,
salaryMax: 0,
currency: 'USD',
benefits: [],
questions: [],
};
}
function formatTime(date) {
const now = new Date();
const diff = Math.floor((now - date) / 1000); // seconds
if (diff < 60) return 'just now';
if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
return date.toLocaleDateString();
}
export default JobPostingForm;
/*
Architecture Highlights:
✅ FormProvider Pattern:
- Clean component separation
- No prop drilling
- Easy to maintain
✅ Custom Hooks:
- useAutoSave for persistence
- useLoadDraft for initialization
- Reusable across projects
✅ Performance:
- useWatch for preview (doesn't re-render form)
- Debounced auto-save
- Optimized re-renders
✅ Advanced Features:
- Auto-save every 30s
- Preview mode
- Duplicate job
- Conditional validation (remote → no location)
- Cross-field validation (salary min < max)
✅ UX:
- Save indicator
- Character counters
- Clear error messages
- Rich preview
Production Checklist:
✅ Auto-save implemented
✅ Error recovery (localStorage)
✅ Validation comprehensive
✅ Preview functionality
✅ Duplicate feature
✅ Conditional logic
✅ Performance optimized
✅ Clean architecture
*/⭐⭐⭐⭐⭐ Bài 5: Production-Ready Dynamic Form Builder (90 phút)
🎯 Mục tiêu: Xây dựng form builder có thể tạo forms dynamically
jsx
/**
* 🎯 Mục tiêu: Meta Form Builder - Build forms from config
* ⏱️ Thời gian: 90 phút
*
* 📋 Feature Specification:
* Form builder cho phép tạo custom forms từ JSON config
*
* Example config:
* {
* title: "Customer Feedback",
* fields: [
* { id: "name", type: "text", label: "Name", required: true },
* { id: "rating", type: "rating", label: "Rating", min: 1, max: 5 },
* { id: "category", type: "select", options: ["..."], conditional: {...} }
* ]
* }
*
* Features:
* 1. Field Types:
* - text, email, number, textarea
* - select, radio, checkbox
* - rating (custom)
* - date, time
*
* 2. Advanced:
* - Conditional fields (show based on other fields)
* - Field dependencies
* - Custom validation rules
* - Dynamic options (populate from API)
*
* 3. Builder UI:
* - Drag & drop (basic - use array reorder)
* - Add/remove fields
* - Configure field properties
* - Live preview
* - Export/Import config (JSON)
*
* 4. Renderer:
* - Takes config → renders form
* - Full RHF integration
* - Responsive layout
* - Accessible
*
* 🏗️ Technical Design:
* - FormBuilder component (builder UI)
* - FormRenderer component (renders from config)
* - useFieldRegistry hook (register field types)
* - Field type components (TextInput, SelectInput, etc.)
* - Validation engine
*
* ✅ Production Checklist:
* - [ ] All field types working
* - [ ] Conditional logic works
* - [ ] Validation comprehensive
* - [ ] Export/Import JSON
* - [ ] Live preview
* - [ ] TypeScript types (if applicable)
* - [ ] Error handling
* - [ ] Accessibility
* - [ ] Documentation
*/💡 Solution
jsx
/**
* Dynamic Form Builder & Renderer
*
* Production-ready form system that can:
* - Build forms from JSON config
* - Render forms dynamically
* - Support conditional fields
* - Export/Import configurations
*/
import {
useForm,
useFormContext,
FormProvider,
useWatch,
} from 'react-hook-form';
import { useState, createContext, useContext } from 'react';
// ============================================
// FORM CONFIG TYPES & EXAMPLES
// ============================================
const SAMPLE_CONFIGS = {
feedback: {
title: 'Customer Feedback Form',
description: 'Help us improve our service',
fields: [
{
id: 'name',
type: 'text',
label: 'Your Name',
required: true,
placeholder: 'John Doe',
},
{
id: 'email',
type: 'email',
label: 'Email Address',
required: true,
placeholder: 'john@example.com',
},
{
id: 'satisfaction',
type: 'rating',
label: 'Overall Satisfaction',
required: true,
min: 1,
max: 5,
},
{
id: 'wouldRecommend',
type: 'radio',
label: 'Would you recommend us?',
required: true,
options: ['Yes', 'No', 'Maybe'],
},
{
id: 'recommendReason',
type: 'textarea',
label: 'Why or why not?',
required: true,
condition: {
field: 'wouldRecommend',
operator: 'equals',
value: 'No',
},
minLength: 20,
},
{
id: 'improvements',
type: 'checkbox',
label: 'What should we improve?',
options: [
'Customer Service',
'Product Quality',
'Pricing',
'Delivery Speed',
'Website Experience',
],
},
{
id: 'comments',
type: 'textarea',
label: 'Additional Comments',
required: false,
rows: 4,
},
],
},
registration: {
title: 'Event Registration',
description: 'Register for our upcoming event',
fields: [
{
id: 'fullName',
type: 'text',
label: 'Full Name',
required: true,
},
{
id: 'attendeeType',
type: 'select',
label: 'Attendee Type',
required: true,
options: ['Student', 'Professional', 'Speaker'],
},
{
id: 'organization',
type: 'text',
label: 'Organization',
required: true,
condition: {
field: 'attendeeType',
operator: 'in',
value: ['Professional', 'Speaker'],
},
},
{
id: 'dietaryRestrictions',
type: 'checkbox',
label: 'Dietary Restrictions',
options: ['Vegetarian', 'Vegan', 'Gluten-free', 'Halal', 'None'],
},
],
},
};
// ============================================
// FORM RENDERER (Main Component)
// ============================================
function DynamicFormBuilder() {
const [currentConfig, setCurrentConfig] = useState(SAMPLE_CONFIGS.feedback);
const [mode, setMode] = useState('builder'); // 'builder' or 'preview'
const [submittedData, setSubmittedData] = useState(null);
const handleConfigChange = (newConfig) => {
setCurrentConfig(newConfig);
};
const handleSubmit = (data) => {
console.log('Form submitted:', data);
setSubmittedData(data);
alert('Form submitted! Check console for data.');
};
const exportConfig = () => {
const dataStr = JSON.stringify(currentConfig, null, 2);
const blob = new Blob([dataStr], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `form-config-${Date.now()}.json`;
link.click();
URL.revokeObjectURL(url);
};
const importConfig = (event) => {
const file = event.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = (e) => {
try {
const config = JSON.parse(e.target.result);
setCurrentConfig(config);
alert('Config imported successfully!');
} catch (error) {
alert('Invalid JSON file!');
}
};
reader.readAsText(file);
};
const loadSampleConfig = (configName) => {
setCurrentConfig(SAMPLE_CONFIGS[configName]);
};
return (
<div style={{ maxWidth: '1400px', margin: '0 auto', padding: '20px' }}>
<h1>🏗️ Dynamic Form Builder</h1>
{/* Mode Toggle & Actions */}
<div
style={{
display: 'flex',
gap: '12px',
marginBottom: '24px',
flexWrap: 'wrap',
}}
>
<button
onClick={() => setMode('builder')}
style={{
padding: '8px 16px',
backgroundColor: mode === 'builder' ? '#2196f3' : '#e0e0e0',
color: mode === 'builder' ? 'white' : 'black',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
}}
>
📝 Builder
</button>
<button
onClick={() => setMode('preview')}
style={{
padding: '8px 16px',
backgroundColor: mode === 'preview' ? '#2196f3' : '#e0e0e0',
color: mode === 'preview' ? 'white' : 'black',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
}}
>
👁️ Preview
</button>
<div style={{ marginLeft: 'auto', display: 'flex', gap: '8px' }}>
<button
onClick={() => loadSampleConfig('feedback')}
style={{
padding: '8px 16px',
backgroundColor: '#9c27b0',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
}}
>
Load Feedback Sample
</button>
<button
onClick={() => loadSampleConfig('registration')}
style={{
padding: '8px 16px',
backgroundColor: '#9c27b0',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
}}
>
Load Registration Sample
</button>
<button
onClick={exportConfig}
style={{
padding: '8px 16px',
backgroundColor: '#4caf50',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
}}
>
📥 Export JSON
</button>
<label
style={{
padding: '8px 16px',
backgroundColor: '#ff9800',
color: 'white',
borderRadius: '4px',
cursor: 'pointer',
}}
>
📤 Import JSON
<input
type='file'
accept='.json'
onChange={importConfig}
style={{ display: 'none' }}
/>
</label>
</div>
</div>
{/* Content Area */}
{mode === 'builder' ? (
<FormBuilderUI
config={currentConfig}
onChange={handleConfigChange}
/>
) : (
<FormRenderer
config={currentConfig}
onSubmit={handleSubmit}
submittedData={submittedData}
/>
)}
</div>
);
}
// ============================================
// FORM BUILDER UI
// ============================================
function FormBuilderUI({ config, onChange }) {
const [editingField, setEditingField] = useState(null);
const updateConfig = (updates) => {
onChange({ ...config, ...updates });
};
const addField = () => {
const newField = {
id: `field_${Date.now()}`,
type: 'text',
label: 'New Field',
required: false,
};
updateConfig({
fields: [...config.fields, newField],
});
};
const removeField = (index) => {
updateConfig({
fields: config.fields.filter((_, i) => i !== index),
});
};
const updateField = (index, updates) => {
const newFields = [...config.fields];
newFields[index] = { ...newFields[index], ...updates };
updateConfig({ fields: newFields });
};
const moveField = (index, direction) => {
const newFields = [...config.fields];
const targetIndex = direction === 'up' ? index - 1 : index + 1;
if (targetIndex < 0 || targetIndex >= newFields.length) return;
[newFields[index], newFields[targetIndex]] = [
newFields[targetIndex],
newFields[index],
];
updateConfig({ fields: newFields });
};
return (
<div
style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '24px' }}
>
{/* Left: Form Config */}
<div>
<div
style={{
padding: '20px',
backgroundColor: '#f9f9f9',
borderRadius: '8px',
marginBottom: '16px',
}}
>
<h2>Form Settings</h2>
<div style={{ marginBottom: '12px' }}>
<label
style={{
display: 'block',
marginBottom: '4px',
fontWeight: 'bold',
}}
>
Form Title
</label>
<input
value={config.title}
onChange={(e) => updateConfig({ title: e.target.value })}
style={{
width: '100%',
padding: '8px',
border: '1px solid #ccc',
borderRadius: '4px',
}}
/>
</div>
<div>
<label
style={{
display: 'block',
marginBottom: '4px',
fontWeight: 'bold',
}}
>
Description
</label>
<textarea
value={config.description}
onChange={(e) => updateConfig({ description: e.target.value })}
rows={2}
style={{
width: '100%',
padding: '8px',
border: '1px solid #ccc',
borderRadius: '4px',
fontFamily: 'inherit',
}}
/>
</div>
</div>
{/* Fields List */}
<div
style={{
padding: '20px',
backgroundColor: '#f9f9f9',
borderRadius: '8px',
}}
>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
marginBottom: '16px',
}}
>
<h2>Fields ({config.fields.length})</h2>
<button
onClick={addField}
style={{
padding: '8px 16px',
backgroundColor: '#4caf50',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
}}
>
+ Add Field
</button>
</div>
{config.fields.map((field, index) => (
<div
key={field.id}
style={{
padding: '12px',
backgroundColor: 'white',
borderRadius: '4px',
marginBottom: '8px',
border:
editingField === index
? '2px solid #2196f3'
: '1px solid #e0e0e0',
}}
>
<div
style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
}}
>
<div style={{ flex: 1 }}>
<strong>{field.label}</strong>
<div style={{ fontSize: '12px', color: '#666' }}>
{field.type} • {field.required ? 'Required' : 'Optional'}
{field.condition && ' • Conditional'}
</div>
</div>
<div style={{ display: 'flex', gap: '4px' }}>
<button
onClick={() => moveField(index, 'up')}
disabled={index === 0}
style={{
padding: '4px 8px',
backgroundColor: index === 0 ? '#e0e0e0' : '#2196f3',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: index === 0 ? 'not-allowed' : 'pointer',
fontSize: '12px',
}}
>
↑
</button>
<button
onClick={() => moveField(index, 'down')}
disabled={index === config.fields.length - 1}
style={{
padding: '4px 8px',
backgroundColor:
index === config.fields.length - 1
? '#e0e0e0'
: '#2196f3',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor:
index === config.fields.length - 1
? 'not-allowed'
: 'pointer',
fontSize: '12px',
}}
>
↓
</button>
<button
onClick={() =>
setEditingField(editingField === index ? null : index)
}
style={{
padding: '4px 8px',
backgroundColor: '#ff9800',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
fontSize: '12px',
}}
>
✏️
</button>
<button
onClick={() => removeField(index)}
style={{
padding: '4px 8px',
backgroundColor: '#f44336',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
fontSize: '12px',
}}
>
✕
</button>
</div>
</div>
{/* Field Editor */}
{editingField === index && (
<FieldEditor
field={field}
allFields={config.fields}
onChange={(updates) => updateField(index, updates)}
/>
)}
</div>
))}
</div>
</div>
{/* Right: JSON Preview */}
<div>
<div
style={{
padding: '20px',
backgroundColor: '#f9f9f9',
borderRadius: '8px',
}}
>
<h2>JSON Configuration</h2>
<pre
style={{
backgroundColor: '#fff',
padding: '16px',
borderRadius: '4px',
overflow: 'auto',
fontSize: '12px',
maxHeight: '600px',
border: '1px solid #e0e0e0',
}}
>
{JSON.stringify(config, null, 2)}
</pre>
</div>
</div>
</div>
);
}
// ============================================
// FIELD EDITOR
// ============================================
function FieldEditor({ field, allFields, onChange }) {
return (
<div
style={{
marginTop: '12px',
padding: '12px',
backgroundColor: '#f5f5f5',
borderRadius: '4px',
}}
>
<div
style={{
display: 'grid',
gridTemplateColumns: '1fr 1fr',
gap: '8px',
marginBottom: '8px',
}}
>
<div>
<label
style={{ display: 'block', fontSize: '12px', marginBottom: '4px' }}
>
Field ID
</label>
<input
value={field.id}
onChange={(e) => onChange({ id: e.target.value })}
style={{
width: '100%',
padding: '6px',
border: '1px solid #ccc',
borderRadius: '4px',
fontSize: '12px',
}}
/>
</div>
<div>
<label
style={{ display: 'block', fontSize: '12px', marginBottom: '4px' }}
>
Type
</label>
<select
value={field.type}
onChange={(e) => onChange({ type: e.target.value })}
style={{
width: '100%',
padding: '6px',
border: '1px solid #ccc',
borderRadius: '4px',
fontSize: '12px',
}}
>
<option value='text'>Text</option>
<option value='email'>Email</option>
<option value='number'>Number</option>
<option value='textarea'>Textarea</option>
<option value='select'>Select</option>
<option value='radio'>Radio</option>
<option value='checkbox'>Checkbox</option>
<option value='rating'>Rating</option>
<option value='date'>Date</option>
</select>
</div>
</div>
<div style={{ marginBottom: '8px' }}>
<label
style={{ display: 'block', fontSize: '12px', marginBottom: '4px' }}
>
Label
</label>
<input
value={field.label}
onChange={(e) => onChange({ label: e.target.value })}
style={{
width: '100%',
padding: '6px',
border: '1px solid #ccc',
borderRadius: '4px',
fontSize: '12px',
}}
/>
</div>
<div style={{ marginBottom: '8px' }}>
<label
style={{
display: 'flex',
alignItems: 'center',
gap: '8px',
fontSize: '12px',
}}
>
<input
type='checkbox'
checked={field.required || false}
onChange={(e) => onChange({ required: e.target.checked })}
/>
Required
</label>
</div>
{/* Type-specific options */}
{['select', 'radio', 'checkbox'].includes(field.type) && (
<div style={{ marginBottom: '8px' }}>
<label
style={{ display: 'block', fontSize: '12px', marginBottom: '4px' }}
>
Options (comma-separated)
</label>
<input
value={field.options?.join(', ') || ''}
onChange={(e) =>
onChange({
options: e.target.value
.split(',')
.map((s) => s.trim())
.filter(Boolean),
})
}
placeholder='Option 1, Option 2, Option 3'
style={{
width: '100%',
padding: '6px',
border: '1px solid #ccc',
borderRadius: '4px',
fontSize: '12px',
}}
/>
</div>
)}
{field.type === 'rating' && (
<div
style={{
display: 'grid',
gridTemplateColumns: '1fr 1fr',
gap: '8px',
}}
>
<div>
<label
style={{
display: 'block',
fontSize: '12px',
marginBottom: '4px',
}}
>
Min
</label>
<input
type='number'
value={field.min || 1}
onChange={(e) => onChange({ min: Number(e.target.value) })}
style={{
width: '100%',
padding: '6px',
border: '1px solid #ccc',
borderRadius: '4px',
fontSize: '12px',
}}
/>
</div>
<div>
<label
style={{
display: 'block',
fontSize: '12px',
marginBottom: '4px',
}}
>
Max
</label>
<input
type='number'
value={field.max || 5}
onChange={(e) => onChange({ max: Number(e.target.value) })}
style={{
width: '100%',
padding: '6px',
border: '1px solid #ccc',
borderRadius: '4px',
fontSize: '12px',
}}
/>
</div>
</div>
)}
</div>
);
}
// ============================================
// FORM RENDERER
// ============================================
function FormRenderer({ config, onSubmit, submittedData }) {
const methods = useForm({
mode: 'onBlur',
});
if (submittedData) {
return (
<div style={{ maxWidth: '800px', margin: '0 auto' }}>
<div
style={{
padding: '24px',
backgroundColor: '#e8f5e9',
border: '2px solid #4caf50',
borderRadius: '8px',
marginBottom: '24px',
textAlign: 'center',
}}
>
<h1 style={{ color: '#2e7d32', margin: '0 0 8px 0' }}>
✅ Form Submitted!
</h1>
<p style={{ margin: 0, color: '#666' }}>
Thank you for your submission
</p>
</div>
<div
style={{
padding: '24px',
backgroundColor: '#f9f9f9',
borderRadius: '8px',
}}
>
<h2>Submitted Data:</h2>
<pre
style={{
backgroundColor: '#fff',
padding: '16px',
borderRadius: '4px',
overflow: 'auto',
fontSize: '14px',
border: '1px solid #e0e0e0',
}}
>
{JSON.stringify(submittedData, null, 2)}
</pre>
</div>
<button
onClick={() => window.location.reload()}
style={{
marginTop: '16px',
padding: '12px 24px',
backgroundColor: '#2196f3',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer',
}}
>
Submit Another Response
</button>
</div>
);
}
return (
<FormProvider {...methods}>
<form onSubmit={methods.handleSubmit(onSubmit)}>
<div style={{ maxWidth: '800px', margin: '0 auto' }}>
<div
style={{
padding: '24px',
backgroundColor: '#f9f9f9',
borderRadius: '8px',
marginBottom: '24px',
}}
>
<h1>{config.title}</h1>
{config.description && (
<p style={{ color: '#666' }}>{config.description}</p>
)}
</div>
{config.fields.map((field) => (
<DynamicField
key={field.id}
field={field}
/>
))}
<button
type='submit'
disabled={
methods.formState.isSubmitting || !methods.formState.isValid
}
style={{
width: '100%',
padding: '16px',
backgroundColor:
methods.formState.isSubmitting || !methods.formState.isValid
? '#ccc'
: '#4caf50',
color: 'white',
border: 'none',
borderRadius: '4px',
fontSize: '18px',
fontWeight: 'bold',
cursor:
methods.formState.isSubmitting || !methods.formState.isValid
? 'not-allowed'
: 'pointer',
}}
>
{methods.formState.isSubmitting ? 'Submitting...' : 'Submit'}
</button>
</div>
</form>
</FormProvider>
);
}
// ============================================
// DYNAMIC FIELD COMPONENT
// ============================================
function DynamicField({ field }) {
const {
register,
watch,
formState: { errors },
} = useFormContext();
// Check condition
if (field.condition) {
const watchField = watch(field.condition.field);
const shouldShow = evaluateCondition(watchField, field.condition);
if (!shouldShow) return null;
}
const error = errors[field.id];
const validation = {
required: field.required && `${field.label} is required`,
};
if (field.minLength) {
validation.minLength = {
value: field.minLength,
message: `Minimum ${field.minLength} characters`,
};
}
const containerStyle = {
marginBottom: '20px',
padding: '16px',
backgroundColor: 'white',
borderRadius: '8px',
border: '1px solid #e0e0e0',
};
const labelStyle = {
display: 'block',
marginBottom: '8px',
fontWeight: 'bold',
};
const inputStyle = {
width: '100%',
padding: '8px',
border: error ? '2px solid red' : '1px solid #ccc',
borderRadius: '4px',
fontSize: '14px',
};
switch (field.type) {
case 'text':
case 'email':
case 'number':
case 'date':
return (
<div style={containerStyle}>
<label style={labelStyle}>
{field.label}
{field.required && <span style={{ color: 'red' }}> *</span>}
</label>
<input
type={field.type}
{...register(field.id, validation)}
placeholder={field.placeholder}
style={inputStyle}
/>
{error && (
<span
style={{
color: 'red',
fontSize: '14px',
display: 'block',
marginTop: '4px',
}}
>
{error.message}
</span>
)}
</div>
);
case 'textarea':
return (
<div style={containerStyle}>
<label style={labelStyle}>
{field.label}
{field.required && <span style={{ color: 'red' }}> *</span>}
</label>
<textarea
{...register(field.id, validation)}
rows={field.rows || 4}
placeholder={field.placeholder}
style={{
...inputStyle,
fontFamily: 'inherit',
resize: 'vertical',
}}
/>
{error && (
<span
style={{
color: 'red',
fontSize: '14px',
display: 'block',
marginTop: '4px',
}}
>
{error.message}
</span>
)}
</div>
);
case 'select':
return (
<div style={containerStyle}>
<label style={labelStyle}>
{field.label}
{field.required && <span style={{ color: 'red' }}> *</span>}
</label>
<select
{...register(field.id, validation)}
style={inputStyle}
>
<option value=''>-- Select --</option>
{field.options?.map((option) => (
<option
key={option}
value={option}
>
{option}
</option>
))}
</select>
{error && (
<span
style={{
color: 'red',
fontSize: '14px',
display: 'block',
marginTop: '4px',
}}
>
{error.message}
</span>
)}
</div>
);
case 'radio':
return (
<div style={containerStyle}>
<label style={labelStyle}>
{field.label}
{field.required && <span style={{ color: 'red' }}> *</span>}
</label>
<div role='radiogroup'>
{field.options?.map((option) => (
<label
key={option}
style={{
display: 'block',
padding: '8px',
marginBottom: '4px',
cursor: 'pointer',
}}
>
<input
type='radio'
value={option}
{...register(field.id, validation)}
style={{ marginRight: '8px' }}
/>
{option}
</label>
))}
</div>
{error && (
<span
style={{
color: 'red',
fontSize: '14px',
display: 'block',
marginTop: '4px',
}}
>
{error.message}
</span>
)}
</div>
);
case 'checkbox':
return (
<div style={containerStyle}>
<label style={labelStyle}>
{field.label}
{field.required && <span style={{ color: 'red' }}> *</span>}
</label>
<div>
{field.options?.map((option) => (
<label
key={option}
style={{
display: 'block',
padding: '8px',
marginBottom: '4px',
cursor: 'pointer',
}}
>
<input
type='checkbox'
value={option}
{...register(field.id, {
validate: field.required
? (value) =>
(value && value.length > 0) ||
`${field.label} is required`
: undefined,
})}
style={{ marginRight: '8px' }}
/>
{option}
</label>
))}
</div>
{error && (
<span
style={{
color: 'red',
fontSize: '14px',
display: 'block',
marginTop: '4px',
}}
>
{error.message}
</span>
)}
</div>
);
case 'rating':
const currentRating = watch(field.id);
return (
<div style={containerStyle}>
<label style={labelStyle}>
{field.label}
{field.required && <span style={{ color: 'red' }}> *</span>}
</label>
<div style={{ display: 'flex', gap: '8px' }}>
{Array.from(
{ length: (field.max || 5) - (field.min || 1) + 1 },
(_, i) => i + (field.min || 1),
).map((num) => (
<label
key={num}
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
width: '50px',
height: '50px',
backgroundColor: currentRating == num ? '#2196f3' : 'white',
color: currentRating == num ? 'white' : 'black',
border: '2px solid #2196f3',
borderRadius: '4px',
cursor: 'pointer',
fontSize: '20px',
fontWeight: 'bold',
}}
>
<input
type='radio'
value={num}
{...register(field.id, validation)}
style={{ display: 'none' }}
/>
{num}
</label>
))}
</div>
{error && (
<span
style={{
color: 'red',
fontSize: '14px',
display: 'block',
marginTop: '4px',
}}
>
{error.message}
</span>
)}
</div>
);
default:
return null;
}
}
// ============================================
// HELPER FUNCTIONS
// ============================================
function evaluateCondition(value, condition) {
switch (condition.operator) {
case 'equals':
return value === condition.value;
case 'not_equals':
return value !== condition.value;
case 'in':
return Array.isArray(condition.value) && condition.value.includes(value);
case 'not_in':
return Array.isArray(condition.value) && !condition.value.includes(value);
default:
return true;
}
}
export default DynamicFormBuilder;
/*
Production Features:
✅ Dynamic Form Builder:
- Build forms from JSON config
- Visual builder UI
- Live preview
- Export/Import JSON
✅ Form Renderer:
- Supports 9 field types
- Conditional fields
- Full validation
- RHF integration
✅ Field Types:
- text, email, number, date
- textarea
- select, radio, checkbox
- rating (custom)
✅ Advanced Features:
- Conditional logic
- Field dependencies
- Reordering fields (up/down)
- Field editor
- Sample configs
✅ UX:
- Builder/Preview modes
- JSON export/import
- Sample configs loader
- Clean interface
Production Checklist:
✅ All field types working
✅ Conditional logic
✅ Validation comprehensive
✅ Export/Import JSON
✅ Live preview
✅ Error handling
✅ Accessible (keyboard nav, ARIA)
✅ Responsive layout
✅ Documentation in code
Use Cases:
- Survey platforms
- Form builders
- Admin panels
- Dynamic questionnaires
- Config-driven UIs
*/📊 PHẦN 4: SO SÁNH PATTERNS (30 phút)
Bảng So Sánh: Advanced RHF Patterns
| Pattern | Use Case | Pros | Cons | When to Use |
|---|---|---|---|---|
| useFieldArray | Dynamic lists (cart items, skills, etc.) | ✅ Built-in re-indexing ✅ Stable IDs ✅ Easy CRUD | ❌ Learning curve ❌ Nested complexity | Lists with add/remove |
| useFormContext | Nested form sections | ✅ No prop drilling ✅ Clean code ✅ Easy refactor | ❌ Hidden dependencies ❌ Debugging harder | Large multi-section forms |
| useWatch | Optimized watching | ✅ Performance ✅ Isolated re-renders | ❌ More verbose ❌ Need control prop | Performance-critical watching |
| watch() | Simple watching | ✅ Simple API ✅ Quick to use | ❌ Re-renders parent ❌ Performance issues | Small forms, simple cases |
| Custom Hooks | Reusable logic | ✅ DRY ✅ Testable ✅ Composable | ❌ Initial setup ❌ Abstraction overhead | Common patterns repeated |
Decision Tree: Which Pattern?
Need dynamic array of fields?
├─ YES → useFieldArray
└─ NO ↓
Form has nested components?
├─ YES → useFormContext (wrap with FormProvider)
└─ NO ↓
Need to watch field values?
├─ YES ↓
│ └─ Performance critical? (large form, many watchers)
│ ├─ YES → useWatch
│ └─ NO → watch()
└─ NO ↓
Have repetitive form logic?
├─ YES → Custom Hooks
└─ NO → Use basic RHF (register, handleSubmit)Performance Comparison
jsx
// Scenario: 20 fields, watching 5 fields
// ❌ watch() - BAD
const field1 = watch('field1'); // Parent re-renders
const field2 = watch('field2'); // Parent re-renders
const field3 = watch('field3'); // Parent re-renders
// Result: 5 keystrokes = 5 parent re-renders + all children
// ✅ useWatch - GOOD
const field1 = useWatch({ control, name: 'field1' }); // Isolated
const field2 = useWatch({ control, name: 'field2' }); // Isolated
const field3 = useWatch({ control, name: 'field3' }); // Isolated
// Result: 5 keystrokes = only watching component re-renders
// Performance gain: ~80% fewer re-renders in large forms🧪 PHẦN 5: DEBUG LAB (20 phút)
Bug 1: useFieldArray key issue ❌
jsx
// ❌ Code bị lỗi
function BuggyList() {
const { fields, append } = useFieldArray({ control, name: 'items' });
return (
<div>
{fields.map((field, index) => (
<input
key={index} // ← BUG: Using index as key!
{...register(`items.${index}.name`)}
/>
))}
</div>
);
}
// ❓ Khi remove item, UI bị mess up. Tại sao?💡 Giải thích & Fix
Vấn đề:
- Dùng
indexlàm key - Khi remove item → indexes thay đổi
- React reuses components incorrectly
- UI shows wrong data
Tại sao xảy ra:
Initial: [item0, item1, item2]
Keys: [0, 1, 2]
Remove index 1:
New: [item0, item2]
Keys: [0, 1] ← Index 1 now points to different item!
React thinks: Keep item at index 0, update item at index 1
Reality: Should remove middle item, keep last itemFix:
jsx
// ✅ Cách đúng - Use field.id
{
fields.map((field, index) => (
<input
key={field.id} // ← CORRECT: Use stable ID from useFieldArray
{...register(`items.${index}.name`)}
/>
));
}Nguyên tắc:
- NEVER use array index as key in useFieldArray
- ALWAYS use
field.id(generated by RHF, stable across reorders) - field.id remains same even when item moves position
Bug 2: useFormContext không hoạt động ❌
jsx
// ❌ Code bị lỗi
function ParentForm() {
const methods = useForm();
return (
<form onSubmit={methods.handleSubmit(onSubmit)}>
<ChildComponent /> {/* ← BUG: No FormProvider! */}
</form>
);
}
function ChildComponent() {
const { register } = useFormContext(); // ← Error: Cannot read context
return <input {...register('field')} />;
}
// ❓ ChildComponent crashes. Tại sao?💡 Giải thích & Fix
Vấn đề:
- useFormContext cần FormProvider ở parent
- Không wrap → no context available
- Component crashes với "cannot read properties of undefined"
Fix:
jsx
// ✅ Cách đúng
import { FormProvider } from 'react-hook-form';
function ParentForm() {
const methods = useForm();
return (
<FormProvider {...methods}>
{' '}
{/* ← Wrap với FormProvider */}
<form onSubmit={methods.handleSubmit(onSubmit)}>
<ChildComponent /> {/* Now can access context */}
</form>
</FormProvider>
);
}
function ChildComponent() {
const { register } = useFormContext(); // ✅ Works!
return <input {...register('field')} />;
}Nguyên tắc:
- FormProvider phải wrap tất cả components cần access form
- Chỉ cần 1 FormProvider ở top-level
- All children/grandchildren có thể dùng useFormContext
Pattern:
jsx
<FormProvider {...methods}>
<form>
<Section1 /> {/* Can use useFormContext */}
<Section2>
<NestedInput /> {/* Can also use useFormContext */}
</Section2>
</form>
</FormProvider>Bug 3: Nested useFieldArray performance issue ❌
jsx
// ❌ Code bị lỗi
function EducationForm() {
const { fields } = useFieldArray({ control, name: 'education' });
return fields.map((edu, eduIndex) => (
<div key={edu.id}>
{/* Nested array */}
<CoursesSection eduIndex={eduIndex} />
</div>
));
}
function CoursesSection({ eduIndex }) {
const { control } = useFormContext();
// ❌ BUG: Re-creates useFieldArray on every education array change!
const { fields: courses } = useFieldArray({
control,
name: `education.${eduIndex}.courses`,
});
return courses.map((course, i) => (
<input
key={course.id}
{...register(`education.${eduIndex}.courses.${i}.name`)}
/>
));
}
// ❓ Adding education entry → all courses components re-render and lose focus💡 Giải thích & Fix
Vấn đề:
- CoursesSection component re-renders khi parent education array thay đổi
- useFieldArray hook re-initializes
- Causes focus loss và performance issues
Fix 1: Memoize component
jsx
// ✅ Better: Memoize với React.memo
import { memo } from 'react';
const CoursesSection = memo(function CoursesSection({ eduIndex }) {
const { control } = useFormContext();
const { fields: courses } = useFieldArray({
control,
name: `education.${eduIndex}.courses`,
});
return courses.map((course, i) => (
<input
key={course.id}
{...register(`education.${eduIndex}.courses.${i}.name`)}
/>
));
});Fix 2: Single component with all logic
jsx
// ✅ Best: Keep nested array logic in same component
function EducationForm() {
const { fields } = useFieldArray({ control, name: 'education' });
return fields.map((edu, eduIndex) => {
// Nested useFieldArray in same component
const NestedCourses = () => {
const { fields: courses } = useFieldArray({
control,
name: `education.${eduIndex}.courses`,
});
return courses.map((course, i) => (
<input
key={course.id}
{...register(`education.${eduIndex}.courses.${i}.name`)}
/>
));
};
return (
<div key={edu.id}>
<NestedCourses />
</div>
);
});
}Nguyên tắc:
- Memoize components using nested useFieldArray
- Or keep nested logic in parent component
- Avoid unnecessary re-initialization of hooks
✅ PHẦN 6: TỰ ĐÁNH GIÁ (15 phút)
Knowledge Check
useFieldArray:
- [ ] Hiểu cách useFieldArray hoạt động
- [ ] Biết tất cả methods (append, remove, insert, update, move, swap)
- [ ] Luôn dùng field.id làm key (KHÔNG dùng index)
- [ ] Hiểu cách handle nested arrays
- [ ] Biết validation cho array fields
useFormContext:
- [ ] Hiểu khi nào dùng FormProvider
- [ ] Biết cách share form state giữa components
- [ ] Tránh được prop drilling
- [ ] Hiểu trade-offs (hidden dependencies)
useWatch:
- [ ] Hiểu sự khác biệt watch() vs useWatch()
- [ ] Biết khi nào dùng useWatch() cho performance
- [ ] Hiểu isolated re-renders
- [ ] Dùng đúng với control prop
Advanced Patterns:
- [ ] Biết tạo custom hooks cho form logic
- [ ] Hiểu conditional fields
- [ ] Cross-field validation
- [ ] Auto-save strategies
- [ ] Form builder patterns
Code Review Checklist
useFieldArray:
- [ ] Dùng field.id làm key (NOT index)
- [ ] Proper field path:
fieldArray.${index}.fieldName - [ ] Error handling:
errors.array?.[index]?.field - [ ] Default values provided in useForm()
useFormContext:
- [ ] FormProvider wraps form
- [ ] {...methods} spread vào FormProvider
- [ ] useFormContext chỉ dùng trong FormProvider children
- [ ] Không overuse (chỉ cho form-related data)
Performance:
- [ ] useWatch cho watching (not watch()) in large forms
- [ ] Memoize expensive components
- [ ] Avoid unnecessary re-renders
- [ ] Debounce auto-save
Architecture:
- [ ] Clear component separation
- [ ] Reusable field components
- [ ] Custom hooks cho logic
- [ ] TypeScript types (if applicable)
🏠 BÀI TẬP VỀ NHÀ
Bắt buộc (30 phút)
Recipe Builder với useFieldArray
Tạo recipe form với:
- Basic info (name, description, servings, prep time, cook time)
- Ingredients array (name, amount, unit)
- Add/remove ingredients
- Reorder (move up/down)
- At least 1 ingredient required
- Instructions array (step number auto-generated, description)
- Add/remove steps
- Reorder steps
- Each step min 10 characters
Tips:
- Use 2 useFieldArray (ingredients + instructions)
- Auto-number steps based on array index
- Calculate total time (prep + cook)
Nâng cao (60 phút)
Budget Tracker với Complex Nested Arrays
Tạo monthly budget tracker:
- Months array (month name, year)
- For each month:
- Income sources array (source, amount)
- Expense categories array (category name)
- For each category:
- Expenses array (description, amount, date)
- For each category:
- For each month:
- Features:
- 3 levels of nesting!
- Calculate totals (income, expenses, balance) per month
- Overall summary (all months)
- Validation: expenses can't exceed income (warning, not error)
- Export to JSON
- Import from JSON
Tips:
- Use nested useFieldArray (3 levels)
- useMemo for calculations
- useWatch for real-time totals
- FormProvider for sharing across components
📚 TÀI LIỆU THAM KHẢO
Bắt buộc đọc
React Hook Form - Advanced
- https://react-hook-form.com/advanced-usage
- useFieldArray, useFormContext, useWatch
React Hook Form - API Reference
- https://react-hook-form.com/api
- Complete API documentation
Đọc thêm
Performance Optimization
- https://react-hook-form.com/advanced-usage#PerformanceOptimization
- Best practices for large forms
TypeScript Support
- https://react-hook-form.com/ts
- Type-safe forms
🔗 KẾT NỐI KIẾN THỨC
Kiến thức nền
- Ngày 41: React Hook Form Basics
- Ngày 36-38: Context API (cho useFormContext)
- Ngày 32-34: Performance (useMemo, useCallback, React.memo)
Hướng tới
- Ngày 43: Schema Validation với Zod
- Ngày 44: Multi-step Forms & Wizards
- Ngày 45: Final Project - Complex Registration Flow
💡 SENIOR INSIGHTS
Cân Nhắc Production
1. useFieldArray Performance
jsx
// ❌ Tránh: Re-initialize nested arrays
{fields.map((field, index) => (
<NestedComponent index={index} /> // Re-creates useFieldArray each time
))}
// ✅ Tốt hơn: Memoize hoặc inline
const NestedComponent = memo(({ index }) => {
const { fields } = useFieldArray({ name: `parent.${index}.children` });
// ...
});
// ✅ Hoặc inline (simpler)
{fields.map((field, index) => {
const NestedFields = () => {
const { fields: children } = useFieldArray({ name: `parent.${index}.children` });
return children.map(...);
};
return <NestedFields key={field.id} />;
})}2. useFormContext Best Practices
jsx
// ❌ Tránh: FormProvider everywhere
<FormProvider {...methods1}>
<FormProvider {...methods2}> {/* Nested providers = confusion */}
<Component />
</FormProvider>
</FormProvider>
// ✅ Tốt hơn: One form per FormProvider
<FormProvider {...methods}>
<ComplexForm />
</FormProvider>
// If need multiple forms, separate components:
<FormProvider {...form1}>
<Form1 />
</FormProvider>
<FormProvider {...form2}>
<Form2 />
</FormProvider>3. Advanced Validation Patterns
jsx
// Cross-field validation với dynamic arrays
const validateCoursesGPA = (courses) => {
const totalCredits = courses.reduce((sum, c) => sum + c.credits, 0);
if (totalCredits > 20) {
return 'Maximum 20 credits per semester';
}
return true;
};
<input
{...register('courses', {
validate: validateCoursesGPA,
})}
/>;Câu Hỏi Phỏng Vấn
Mid Level:
Q: useFieldArray vs manual array state management? A: useFieldArray provides: stable IDs (field.id), automatic re-indexing, built-in validation support, better performance. Manual state requires handling all this yourself.
Q: Khi nào dùng useFormContext? A: Dùng khi form có nhiều nested components và muốn tránh prop drilling. NOT for passing non-form data (use normal Context/props).
Senior Level:
Q: Design form architecture cho ứng dụng với 50+ different forms? A:
- Shared field component library
- Form config driven (JSON schema)
- Reusable validation rules
- Custom hooks for common patterns
- FormBuilder for non-developers
- Centralized error handling
- Analytics integration
Q: Optimize performance cho form với 100+ fields và nested arrays? A:
- useWatch thay vì watch()
- React.memo cho field components
- Debounce validation
- Code splitting cho large sections
- Virtual scrolling nếu cần
- Lazy load field components
Q: Handle concurrent updates trong collaborative forms (multiple users)? A:
- Optimistic updates
- Conflict resolution strategy
- Last-write-wins vs merge
- Field-level locking
- Real-time sync with debouncing
- Show who's editing what
War Stories
Story 1: The Field Array Index Disaster
Situation: E-commerce cart với 50 items, dùng index làm key
Problem: Remove item → UI shows wrong products!
Root cause: Index as key → React reuses wrong components
Solution: Switch to field.id → Problem solved
Lesson: ALWAYS use field.id, NEVER index
Time wasted: 4 hours debuggingStory 2: The FormProvider Confusion
Situation: Large form với 10 sections, mỗi section là separate component
Problem: Passing register, errors, etc. qua 10 components
Solution: useFormContext → no more prop drilling
Benefit: 500 lines of props removed, much cleaner
Lesson: FormProvider = game changer for complex formsStory 3: The Nested Array Performance Hell
Situation: Education form với courses (nested array)
Problem: Adding 1 course → ALL education entries re-render
Root cause: Nested useFieldArray không memoized
Solution: React.memo on nested component
Result: Performance improvement 10x
Lesson: Always memoize components với nested useFieldArray🎯 PREVIEW NGÀY MAI
Ngày 43: Schema Validation với Zod
Chúng ta sẽ học:
- Zod fundamentals & syntax
- Integration với React Hook Form
- Type-safe validation
- Complex schemas (nested objects, arrays)
- Custom error messages
- Schema composition & reuse
- Runtime type safety
Chuẩn bị:
- Ôn lại RHF validation (Ngày 41-42)
- Hiểu TypeScript basics (nếu biết)
- Suy nghĩ về complex validation scenarios
🎉 Chúc mừng! Bạn đã hoàn thành Ngày 42 - React Hook Form Advanced!