SyntheticEvent in React
When you click a button in React, you get an event object. But this isn't the native browser event – it's something called a **SyntheticEvent**. Understanding what this is and how it works is important for advanced event handling.
What is a SyntheticEvent?
A SyntheticEvent is React's cross-browser wrapper around the browser's native event. It has the same interface as native events (like `stopPropagation()` and `preventDefault()`), but it works identically across all browsers.
SyntheticEvent ensures that events work the same way in every browser. You don't have to worry about browser inconsistencies!
Why SyntheticEvent?
- Cross-browser Compatibility: Different browsers have slightly different event implementations. SyntheticEvent normalizes them.
- Performance: React reuses event objects for performance reasons (event pooling).
- Consistent API: You can use the same methods everywhere.
Common SyntheticEvent Properties
| Property/Method | Description |
|---|---|
| `event.target` | The DOM element that triggered the event |
| `event.type` | The type of event (e.g., 'click', 'change') |
| `event.preventDefault()` | Prevents default browser behavior (e.g., form submission) |
| `event.stopPropagation()` | Stops event from bubbling up to parent elements |
| `event.target.value` | For input events, gets the current value |
Example: Using SyntheticEvent Properties
function FormDemo() { const [formData, setFormData] = useState({ username: '', password: '' });
function handleChange(event) { const { name, value } = event.target; setFormData(prev => ({ ...prev, [name]: value })); }
function handleSubmit(event) { event.preventDefault(); <!-- Prevents page refresh --> console.log('Form submitted:', formData); }
function handleDivClick() { console.log('Div clicked!'); }
function handleButtonClick(event) { event.stopPropagation(); <!-- Stops event from reaching parent div --> console.log('Button clicked!'); }
return ( <div onClick={handleDivClick}> <form onSubmit={handleSubmit}> <input type="text" name="username" value={formData.username} onChange={handleChange} placeholder="Username" /> <input type="password" name="password" value={formData.password} onChange={handleChange} placeholder="Password" /> <button type="submit" onClick={handleButtonClick}>Submit</button> </form> </div> );}Important Note: Event Pooling (Legacy)
In older versions of React (before 17), SyntheticEvent objects were pooled for performance. This meant that the event object would be reused and its properties would be nullified after the event handler finished. You couldn't access the event asynchronously.
In modern React (17+), this pooling is removed, so you can safely use the event in asynchronous code like `setTimeout` or `Promise`.
Two Minute Drill
- SyntheticEvent is React's cross-browser wrapper around native browser events.
- It provides a consistent API across all browsers.
- Common properties: `target`, `type`, `preventDefault()`, `stopPropagation()`.
- Use `event.preventDefault()` to stop default browser behavior (like form submission).
- Use `event.stopPropagation()` to prevent events from bubbling up to parent elements.
- In modern React, you can use SyntheticEvent in asynchronous code (no pooling).
Need more clarification?
Drop us an email at career@quipoinfotech.com