Keep a signup email as a string while the user edits it, bind that string to the input’s value, and update it synchronously in onChange. In TypeScript, a named handler can use React.ChangeEvent<HTMLInputElement>. The string is only the user’s current input—not proof that the address is valid, exists, or belongs to them.
Model the email field as an editable string
A person may leave the field empty, type only part of an address, or enter a malformed value before correcting it. Keep this intermediate input representable by using a string rather than a type that implies verification has already happened.
As an Amazon Associate I earn from qualifying purchases.
For example, initialize the field with an empty string and update it from the input’s change event:
import { useState } from 'react';
export function SignupEmail() {
const [email, setEmail] = useState('');
function handleEmailChange(event: React.ChangeEvent<HTMLInputElement>) {
setEmail(event.currentTarget.value);
}
return (
<label>
Email address
<input
type="email"
name="email"
autoComplete="email"
value={email}
onChange={handleEmailChange}
/>
</label>
);
}The input’s name identifies its key in form data. The autoComplete value gives the browser a hint about the field’s purpose.
#1 Best Overall
Why a controlled input can revert while typing
In this pattern, value={email} makes the input controlled: React supplies the displayed value from state. If the event handler does not update that state synchronously, React can restore the previous value after a keystroke. Keep the state update in the onChange handler and use the edited value from the event.
For a short inline handler, TypeScript can infer the event type from the input context. When extracting a handler, the explicit type React.ChangeEvent<HTMLInputElement> describes a change event from an HTML input. React’s TypeScript guide shows reading the value through event.currentTarget.value.
What type="email" validates—and what it does not
The browser’s email control can check whether a nonempty value matches a browser-recognized email format. That is a format check, not verification: it cannot establish that the mailbox exists, that the user controls it, or that your service should accept it. Client-side validation can also be changed or bypassed, so validate submitted values on the server. See MDN’s email input reference.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
If signup depends on proving account ownership, use a separate confirmation step. A format check alone cannot prove ownership.
Keep the input value separate from signup status
The email string and the result of the signup request are different kinds of state. A useful flow distinguishes the field value from statuses such as empty, typing, submitting, error, and success. When a request fails or succeeds, update the status or server-error state without replacing the user’s email with a status value.
React’s guide to responding to input with state illustrates how UI state can change as a user edits, submits, and receives a network result.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Choose state based on what the form needs to do
There is no universal winner between controlling a field and reading its form data at submission. The choice depends on when the interface needs the value and how the form is handled.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →- Use controlled state when the UI responds to edits. It is useful for showing hints, validation feedback, or other changes while the user types.
- Use submission handling when the value is only needed on submit. React documents handling a form’s
onSubmit, callingpreventDefault(), and reading the submit event. See the React form reference. - Limit the rendering scope if keystroke updates affect a large tree. React suggests moving the input’s state into a smaller component or, when needed, using
useDeferredValue. See the React input reference.
For the controlled approach and its synchronous update requirement, consult the same React input reference. The event typing pattern is covered in the React TypeScript guide.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
