React: How to handle forms in React?

⚛️React🌱 junior

How to handle forms in React?

Forms in React can be handled in three ways: controlled, uncontrolled, and Server Actions.

Simple analogy: Imagine you are filling out a form.

Controlled — you write with a pencil, every letter is immediately checked by the secretary.
Uncontrolled — you write with a pen. The secretary only looks when you are finished.
Server Actions — you tell the secretary orally, they send it immediately.

1. Controlled (through state):

jsx

1function LoginForm() {
2    const [email, setEmail] = useState('');
3    const [password, setPassword] = useState('');
4    
5    function handleSubmit(e) {
6        e.preventDefault();
7        login(email, password);
8    }
9    
10    return (
11        <form onSubmit={handleSubmit}>
12            <input value={email} onChange={e => setEmail(e.target.value)} />
13            <input type="password" value={password} onChange={e => setPassword(e.target.value)} />
14            <button type="submit">Login</button>
15        </form>
16    );
17}

2. Uncontrolled (through ref):

jsx

1function LoginForm() {
2    const emailRef = useRef();
3    const passwordRef = useRef();
4    
5    function handleSubmit(e) {
6        e.preventDefault();
7        login(emailRef.current.value, passwordRef.current.value);
8    }
9    
10    return (
11        <form onSubmit={handleSubmit}>
12            <input ref={emailRef} />
13            <input ref={passwordRef} type="password" />
14            <button type="submit">Login</button>
15        </form>
16    );
17}

3. Server Actions (React 19): simplest way — form works even without JS.

jsx

1<form action={loginAction}>
2    <input name="email" type="email" required />
3    <input name="password" type="password" required />
4    <button type="submit">Login</button>
5</form>

Form libraries: React Hook Form (lightweight), Formik (powerful).