Synthetic events in React

In React, a synthetic event is an abstraction over the native event system. React creates a synthetic event object that wraps the native event for all event handling. This provides a consistent interface for handling events across different browsers.

 

Key Characteristics of Synthetic Events

1. Cross-Browser Compatibility: Synthetic events normalize the differences between browsers. This means that the same event handling code will work consistently regardless of the browser.
   
   
2. Performance: Synthetic events are pooled for performance reasons. This means that they are reused across multiple events to minimize memory usage. Once the event is processed, the properties are reset, and the object can be reused.
   
   
3. API Consistency: The synthetic event object mimics the native event object and includes all the properties and methods you would expect, such as preventDefault(), stopPropagation(), and event properties like target, currentTarget, type, etc.
   
   

Example :

Here’s a simple example of using synthetic events in a React component:

import React from 'react';

const SyntheticEventExample = () => {

    const handleClick = (event) => {

        event.preventDefault(); // Prevents the default action

        console.log('Button clicked!', event);

    };

    return (

        <div>

            <button onClick={handleClick}>Click Me</button>

        </div>

    );

};

export default SyntheticEventExample;

Key Methods and Properties

• event.preventDefault(): Prevents the default action associated with the event (e.g., preventing a form submission).
  
  
• event.stopPropagation(): Stops the event from bubbling up to parent elements.
  
  
• event.target: References the element that triggered the event.
  
  
• event.currentTarget: References the element to which the event handler is attached.
  
  
• event.type: A string representing the type of event (e.g., "click", "mouseover").
  
  

Synthetic Event Pooling

Due to synthetic event pooling, the properties of synthetic events are reset after the event callback is invoked. Therefore, if you need to access the event properties asynchronously (like in a setTimeout), you should call event.persist() to prevent the synthetic event from being reset:

 

const handleClick = (event) => {

    event.persist(); // Prevents the event from being pooled

    setTimeout(() => {

        console.log('Event type:', event.type);

    }, 1000);

};

Conclusion

Synthetic events provide a powerful way to handle events in React by normalizing browser differences and offering a consistent API. Understanding how they work is essential for effective event handling in React applications.