mediumFrontend

How do you handle forms in React?

Q: How do you handle forms in React?

**Core concept (TL;DR).** Manage inputs as **controlled** components (state + onChange ) or **uncontrolled** (refs), handle submission with an onSubmit that calls e.preventDefault() , and validate in the handler. React 19 adds **Actions** ( <form action={fn}> + useActionState ) for built-in pending/error handling; for complex forms, libraries like React Hook Form reduce re-renders and boilerplate. Inputs → submit handler → validate → action <rect x="24" y="58" width="100" height="40" rx="8" fill="#06b6d4" fill-o

640 views

Understand the problem

Discuss common strategies for managing form input, state, and submissions in React applications.

formsstate managementeventscontrolled components

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Controlled form with one change handler

import { useState } from "react";

export default function App() {
  const [form, setForm] = useState({ name: "", email: "" });
  const onChange = (e) =>
    setForm((f) => ({ ...f, [e.target.name]: e.target.value })); // key by name

  const onSubmit = (e) => {
    e.preventDefault();                       // stop the page reload
    if (!form.email.includes("@")) return alert("invalid email");
    alert("submitted: " + JSON.stringify(form));
  };

  return (
    <form onSubmit={onSubmit} style={{ padding: 24, fontFamily: "system-ui" }}>
      <input name="name" value={form.name} onChange={onChange} placeholder="name" />
      <input name="email" value={form.email} onChange={onChange} placeholder="email" />
      <button type="submit">Send</button>
    </form>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How do you prevent unnecessary re-renders in functional components?

When would you choose a class component over a functional component with hooks?