Event Propagation in React (Live Playground)

Event propagation is an essential concept to understand when working with events in React. In this tutorial, we'll explore event propagation in React, including event bubbling, event capturing, and using the stopPropagation() method, with sample code and simple explanations.

Event Bubbling

Event bubbling is the process by which an event propagates up the DOM tree from the target element to the root element. In React, events bubble by default. Here's an example of event bubbling in React:

JavaScript

function App() {
  const handleParentClick = () => {
    console.log('Parent div clicked');
  };

  const handleChildClick = () => {
    console.log('Child button clicked');
  };

  return (
    <div onClick={handleParentClick}>
      <button onClick={handleChildClick}>Click me</button>
    </div>
  );
}

In this example, clicking the child button will trigger both handleChildClick and handleParentClick due to event bubbling.

Live Playground, Try it Yourself

Event Capturing

Event capturing is the opposite of event bubbling. It's the process by which an event propagates down the DOM tree from the root element to the target element. To use event capturing in React, you can add Capture to the event name, like this:

JavaScript

function App() {
  const handleParentClickCapture = () => {
    console.log('Parent div clicked during capturing phase');
  };

  const handleChildClick = () => {
    console.log('Child button clicked');
  };

  return (
    <div onClickCapture={handleParentClickCapture}>
      <button onClick={handleChildClick}>Click me</button>
    </div>
  );
}

In this example, clicking the child button will trigger handleParentClickCapture before handleChildClick due to event capturing.

Live Playground, Try it Yourself

Using stopPropagation()

The stopPropagation() method can be used to prevent an event from propagating further up or down the DOM tree. Here's an example of using stopPropagation() to prevent event bubbling:

JavaScript

function App() {
  const handleParentClick = () => {
    console.log('Parent div clicked');
  };

  const handleChildClick = event => {
    event.stopPropagation();
    console.log('Child button clicked');
  };

  return (
    <div onClick={handleParentClick}>
      <button onClick={handleChildClick}>Click me</button>
    </div>
  );
}

In this example, clicking the child button will only trigger handleChildClick, and event propagation will be stopped, so handleParentClick won't be triggered.

Live Playground, Try it Yourself

Conclusion

Understanding event propagation in React is crucial for managing user interactions in your applications. By learning about event bubbling, event capturing, and using the stopPropagation() method, you'll be better equipped to handle complex event scenarios in your React projects. With a strong foundation in event propagation, you'll be well on your way to becoming an effective React developer.