React Forms

value makes the input controlled,React manages its value and you must provide an onChange handler. Without onChange, the input becomes read-only and React will warn you.

defaultValue sets the initial value only, then lets the DOM own the value going forward, this is the uncontrolled pattern. React never re-reads or syncs this value after mount, so state changes won’t affect what’s displayed.

This almost always means you’re defining a child component (your input or wrapper) inside the parent component’s render function. On every state change, React sees a new component type and unmounts/remounts it, wiping focus.

Fix: Always define component functions at the module level, outside the parent. Never write const MyInput = () => <input /> inside another component’s body.

Call your validate function inside handleSubmit, store the result in errors state, then return early if there are any errors:

const errs = validate(fields); setErrors(errs); if (Object.keys(errs).length > 0) return;

With React Hook Form, this is handled automatically, handleSubmit(onSubmit) only calls your onSubmit callback when all validation passes.

For controlled forms, set all state back to initial values: setFormData(initialState). Also clear your errors state: setErrors({}) and reset submitted to false.

For React Hook Form, call the reset() function returned by useForm(). You can optionally pass new default values: reset({ name: 'Rahat', email: '' }).

Use useState for: simple forms with 1–3 fields, quick prototypes, cases where form state drives other UI logic (e.g., a step wizard where step depends on form values).

Use React Hook Form for: forms with 4+ fields, complex validation, schema validation with Zod/Yup, multi-step (wizard) forms, field arrays (useFieldArray), or any production form where performance matters.

Debounce the API call in your onChange handler using setTimeout/clearTimeout, or the use-debounce library. Store the async error in state separately from sync errors.

With RHF, the validate option inside register accepts async functions: validate: async (val) => { const taken = await checkEmail(val); return taken ? 'Email already in use' : true; }

Unlike HTML where content goes between tags (<textarea>text</textarea>), React’s <textarea> uses a value prop just like an input, making it a controlled self-closing element:

<textarea value={bio} onChange={(e) => setBio(e.target.value)} rows={4} />

Track submission state with a boolean: const [isLoading, setIsLoading] = useState(false). In your submit handler, set setIsLoading(true) before the API call, and setIsLoading(false) inside a finally block.

Then: <button disabled={isLoading}>{isLoading ? 'Submitting...' : 'Submit'}</button>

A dirty field is one whose current value differs from its initial/default value. A touched field is one the user has focused and then left (blurred), regardless of whether the value changed.

Both concepts help you decide when to show validation errors. RHF tracks these automatically in formState.dirtyFields, formState.isDirty, and formState.touchedFields.

Maintain a step state (0, 1, 2…) and store all data in a shared parent state object. Conditionally render each step’s fields. Only validate the current step’s fields before advancing to the next step.

With React Hook Form, use trigger(['field1', 'field2']) to programmatically validate specific fields before proceeding. Only call handleSubmit on the final step.