SyntheticEvent Explained
SyntheticEvent is React's universal remote control for browser events, working the same way no matter which browser you're using.
Syntax
function handler(event) {
event.preventDefault(); // stop default browser action
console.log(event.target); // element that triggered it
}
<element onEvent={handler} />What SyntheticEvent Provides
Every event handler in React receives a SyntheticEvent object instead of the raw browser event. It behaves consistently across browsers and includes the same familiar methods and properties you'd expect, like .target and .preventDefault().
Note:
You rarely need to think about SyntheticEvent explicitly -- just use it the same way you'd use a normal DOM event.
Warning:
In React versions before 17, SyntheticEvent objects were pooled and reused, so accessing them asynchronously required extra care -- this was removed in React 17+.
Example: What SyntheticEvent Provides
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function ClickLogger() {
function handleClick(event) {
console.log("Event type:", event.type);
}
return <button onClick={handleClick}>Click and check console</button>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<ClickLogger />);
</script>
</body>
</html>Preventing Default Behavior
Calling event.preventDefault() on a SyntheticEvent stops the browser's default action for that event, like a form submitting and reloading the page, or a link navigating away. This works exactly like it does with native DOM events.
Note:
Always call
preventDefault() on form submit handlers if you're managing the submission yourself with JavaScript.Warning:
Forgetting
preventDefault() on a form's submit handler causes the page to reload, wiping out any React state.Example: Preventing Default Behavior
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Form() {
function handleSubmit(event) {
event.preventDefault();
alert("Form submitted without reloading the page!");
}
return (
<form onSubmit={handleSubmit}>
<button type="submit">Submit</button>
</form>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<Form />);
</script>
</body>
</html>Accessing event.target
event.target refers to the actual DOM element that triggered the event, giving you access to its properties like value for an input field. This is the most common way to read what a user typed or selected.
Note:
For text inputs,
event.target.value is the standard way to read the current typed value inside an onChange handler.Warning:
For checkboxes, you need
event.target.checked instead of event.target.value to get the correct boolean state.Example: Accessing event.target
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function NameInput() {
const [name, setName] = React.useState("");
return (
<div>
<input onChange={(e) => setName(e.target.value)} placeholder="Type your name" />
<p>You typed: {name}</p>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<NameInput />);
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
Common Mistakes
- Assuming SyntheticEvent has fewer features than the native event -- it wraps almost everything the native event provides.
- Storing the event object for use later after the handler has finished, in older React versions (this was pooled and reused).
- Confusing SyntheticEvent method names with native DOM event methods, which are mostly the same but worth double-checking.
Chapter Summary
- React wraps native browser events in a cross-browser SyntheticEvent object.
- SyntheticEvent provides consistent behavior across different browsers.
- Common methods like
.preventDefault()and.stopPropagation()work as expected. - You access the underlying native event via
event.nativeEventif ever needed.
Browser Support
Consistent behavior across all modern browsers is exactly the purpose of SyntheticEvent; event pooling was removed in React 17+, simplifying async event access.
🔒
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: