Understanding and Fixing Event Bubbling Issues in React

When event.stopPropagation() doesn’t seem to work as expected in React, there are several potential causes and solutions to consider.

Common Reasons Why Propagation Continues

1. Using Synthetic Events Incorrectly
2. Event Listeners at Different Levels
3. Asynchronous State Updates
4. Native DOM Events vs React Synthetic Events

Core Solutions

1. Proper Synthetic Event Handling

function handleClick(e) {
  e.stopPropagation(); // Correct React synthetic event usage
  console.log('Button clicked');
}

function Parent() {
  return (
    <div onClick={() => console.log('Parent clicked')}>
      <button onClick={handleClick}>Click Me</button>
    </div>
  );
}

2. Handling Both Synthetic and Native Events

function handleClick(e) {
  e.stopPropagation();
  e.nativeEvent.stopImmediatePropagation(); // For native DOM events
}

// Use case when mixing React and vanilla JS event listeners
document.addEventListener('click', () => {
  console.log('This will still fire without nativeEvent handling');
});

3. Event Capture Phase

<div onClickCapture={() => console.log('Parent capture')}>
  <button onClick={e => {
    e.stopPropagation();
    console.log('Button clicked');
  }}>
    Click Me
  </button>
</div>

Advanced Scenarios

Portal Events (React 16+)

function Modal({ onClose }) {
  return ReactDOM.createPortal(
    <div 
      className="modal" 
      onClick={e => e.stopPropagation()}
    >
      <button onClick={onClose}>Close</button>
    </div>,
    document.body
  );
}

Event Pooling (React 16 and Below)

function handleClick(e) {
  e.persist(); // For React 16 and below
  setTimeout(() => {
    e.stopPropagation(); // Would fail without persist()
  }, 100);
}

Debugging Tips

1. Check Event Listeners:

   // In browser console
   getEventListeners(document.body);

2. Verify Event Phase:

   <div 
     onClick={() => console.log('bubble')}
     onClickCapture={() => console.log('capture')}
   >
     <button onClick={e => e.stopPropagation()}>Click</button>
   </div>

3. Inspect Event Object:

   console.log(e.nativeEvent);

Common Pitfalls

1. Forgetting Synthetic Events:

   // ❌ Wrong in React
   <button onClick={e => e.stopPropagation()}>
     Click
   </button>

2. Multiple Event Systems:

   // Mixing React and jQuery events
   $('#myButton').click(function(e) {
     // Won't stop React events
   });

3. Asynchronous Propagation:

   function handleClick(e) {
     setTimeout(() => {
       e.stopPropagation(); // Too late!
     }, 0);
   }

Best Practices

1. Use Synthetic Events Consistently
2. Handle Events at the Right Level
3. Consider Event Delegation Patterns
4. Test Across Browsers (especially for portal scenarios)
5. Use React’s Event System Exclusively when possible

Remember: React’s event system is a cross-browser wrapper around native events. Understanding this abstraction layer is key to proper event handling.