Day 8 of #100DaysofCode — Understanding Form Handling with TypeScript in React

Published: 3 days ago (February 8, 2026 at 05:01 PM EST)

3 min read

Source: Dev.to

Form handling is one of those core skills every developer must eventually master. Whether you’re building login pages, search bars, dashboards, admin portals, or complex data‑entry tools, forms power user interaction. Today’s topic — Form Handling + TypeScript — is about making this experience smoother, safer, and more predictable.

What Exactly Is Form Handling?

Form handling is simply the process of:

Collecting data from form fields
Keeping track of what the user types
Validating user input
Submitting this data to a server or using it within the app

In short:
👉 Form handling ensures your UI and your data stay in sync.

Controlled vs Uncontrolled Forms: What’s the Difference?

✔ Controlled Forms

A controlled input is fully managed by React state. Whatever you type in the input goes into the state, and the state feeds the input’s value.

Pros

Full UI control
Easy validation
State is always the source of truth
Perfect with TypeScript since everything is typed

Cons

Slightly more boilerplate
More re‑renders if not optimized

Example

import { useState } from "react";

const [name, setName] = useState("");

return (
   setName(e.target.value)}
  />
);

✔ Uncontrolled Forms

Uncontrolled inputs store their own value inside the DOM. You access them using refs only when needed.

Pros

Less code
Good for simple/legacy forms

Cons

Harder to validate
Values aren’t synced with React state
Less synergy with TypeScript

Example

import { useRef } from "react";

const nameRef = useRef(null);

const handleSubmit = () => {
  console.log(nameRef.current?.value);
};

return ;

Handling Form Inputs — Basic Example

interface FormData {
  name: string;
  email: string;
}

const [form, setForm] = useState({
  name: "",
  email: "",
});

const handleChange = (e: React.ChangeEvent) => {
  setForm({
    ...form,
    [e.target.name]: e.target.value,
  });
};

This pattern scales beautifully—especially once TypeScript enters the picture.

Why TypeScript Makes Form Handling 10x Better

⭐ Strong Typing of Form State

You define what shape your form should have—no surprises later.

⭐ Typed Event Handlers

No more guessing what e.target actually contains.

⭐ Safer Ref Usage

Never accidentally access the wrong DOM element type.

⭐ Predictability in Large Forms

The bigger the form, the more TypeScript shines.

🔎 Basic Form Validation Example

const handleSubmit = (e: React.FormEvent) => {
  e.preventDefault();

  if (!form.name.trim()) {
    alert("Name is required");
    return;
  }

  if (!form.email.includes("@")) {
    alert("Invalid email address");
    return;
  }

  console.log("Form submitted:", form);
};

Validation becomes clearer when everything is strictly typed.

Real-World Examples Where TS + Forms Shine

Authentication Flows

Admin Dashboards

Dynamic forms with lots of fields: TS prevents incorrect assignments.

E‑Commerce Checkout

Shipping forms, payment details, coupon codes — strict typing reduces failures.

Multi‑Step Forms

TypeScript helps track progress, schema, and partial form data.

API‑Driven Forms

When backend APIs return typed response structures, the form stays in sync.

Wrapping It Up!

Mastering form handling isn’t just about capturing user input — it is about building reliable, accessible, and scalable experiences. With TypeScript in the mix, you gain confidence that your forms behave exactly the way you expect.

Happy coding!