Event Handling
Event handling is how React connects browser events like clicks, typing, and submit actions to application code. In JSX, handlers are passed as functions so the component can declare how it should react to user input.
▶Architecture Diagram
🔄 ProcessDashed line animations indicate the flow direction of data or requests
A visible screen is not enough for an application. It also has to respond. But if every event directly patches the DOM, value flow gets scattered and it becomes hard to trace which interaction caused which UI change.
In DOM-centric code, teams often attached listeners with addEventListener and then manipulated nodes inside callbacks. React pulled that pattern into a state-driven flow where events are the trigger, but rendering remains responsible for calculating the resulting UI.
A user action produces a browser event. React invokes the handler attached in JSX. That handler decides what to change, often by updating state or calling a callback passed down through props. React then rerenders the affected UI from the new values.
A click event starting a state change
import { useState } from "react";
export function ModalToggle() {
const [isOpen, setIsOpen] = useState(false);
function handleToggle() {
setIsOpen((open) => !open);
}
return (
<>
<button onClick={handleToggle}>
{isOpen ? "Close" : "Open"}
</button>
{isOpen && <Dialog>Settings</Dialog>}
</>
);
}The event handler's job is to interpret the user action and decide the next state change. The UI transition itself happens in the following render.
Reading the event object and overriding default behavior
import { useState } from "react";
function SearchForm({ onSearch }: { onSearch: (query: string) => void }) {
const [query, setQuery] = useState("");
function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
event.preventDefault();
onSearch(query);
}
return (
<form onSubmit={handleSubmit}>
<input
value={query}
onChange={(event) => setQuery(event.target.value)}
/>
<button type="submit">Search</button>
</form>
);
}Handlers are not just click hooks. They are also the place where you inspect the event object, block browser defaults, and connect the action to parent logic.
Event handlers and Effects both run code, but they do not start from the same place. Event handlers begin with a direct user action. Effects begin after render has committed and are meant for synchronizing with external systems. Controlled components are a more specific form pattern built on input events.
Commonly Compared Concepts
Effect
The React phase for synchronizing with external systems after rendering
Event handlers run in response to user actions, while Effects run after rendering to synchronize with something external.
Controlled Components
The pattern where React state is the single source of truth for form inputs
General event handling covers all kinds of interactions, while controlled components are the specific pattern of wiring form input events into state.
In practice, handlers stay healthier when they do not accumulate too many responsibilities. If one click triggers validation, network calls, navigation, and several local updates all at once, the flow becomes difficult to test and reason about.