Generic event-handler typing
Type a handler when no narrower React event type covers the DOM event you receive.
React 19+ · Type Alias
SyntheticEvent
React.SyntheticEvent is the general TypeScript type for React event objects. It follows the DOM Event model while smoothing over browser inconsistencies and exposing the original event through nativeEvent.
How it works
React.SyntheticEvent is the TypeScript base type for React event objects. React event objects follow the standard DOM Event shape while smoothing over browser differences, and they expose the original browser event through nativeEvent.
Syntax
React.SyntheticEvent<T = Element, E = Event>Parameters
| Name | Type | Description |
|---|---|---|
event | React.SyntheticEvent<T, E> | The React event object delivered to an event handler; generic parameters can describe the native event and current target element. |
Key points
- The React event interface resembles the browser Event interface while normalizing browser behavior.
- currentTarget identifies the element where the active React handler is attached.
- target can be a descendant that originated the event rather than the element running the handler.
- nativeEvent exposes the underlying DOM Event when direct browser-level access is needed.
- stopPropagation() prevents the event from continuing through React’s event tree.
Common mistakes
- Do not assume every React event corresponds one-to-one with a native browser event.
- Use nativeEvent when browser-specific access to the original DOM event is required.
Example: Reading a React event object
function handleClick(event: React.SyntheticEvent<HTMLButtonElement>) {
event.preventDefault();
console.log(event.currentTarget);
}
export default function App() {
return <button onClick={handleClick}>Save</button>;
}The handler receives React’s event object, uses a standard event method, and reads the element associated with the handler.
When to use it
Event control and inspection
Inspect or cancel an interaction using standard event properties and methods.
Native event access
Reach browser-specific details that are available only on the underlying DOM event.
Interview questions
QWhat is React.SyntheticEvent?
SyntheticEvent is the base TypeScript type for React events. React event objects provide standard Event properties and methods while addressing browser inconsistencies.
Follow-up: How do you access the browser event? Read the React event’s nativeEvent property, while remembering that its native type may differ from the React event name.
QWhich common operations and properties does a React event object provide?
Use preventDefault() to stop the browser’s default action, and stopPropagation() to stop propagation through the React tree. Properties such as defaultPrevented and currentTarget let the handler inspect event state and attachment.
Follow-up: How can you determine whether cancellation already occurred? Check isDefaultPrevented() or the defaultPrevented property.
QHow would you type a generic React event handler in TypeScript?
Type the handler parameter as React.SyntheticEvent with an appropriate element type when a more specific event type is not available. For example, React.SyntheticEvent<HTMLButtonElement> describes an event handled by a button.
Follow-up: When the event is one of React’s specifically documented event types, prefer that narrower type so event-specific fields are available.
Related
EventnativeEventpreventDefaultstopPropagationcurrentTargettargetisDefaultPreventedisPropagationStopped