Create Synthetic Events Lazily (#19909)

Author: gaearon

packages/react-dom/src/events/DOMPluginEventSystem.js

@@ -709,31 +709,19 @@ function createDispatchListener(
  };
 }
 
-function createDispatchEntry(
- event: ReactSyntheticEvent,
- listeners: Array<DispatchListener>,
-): DispatchEntry {
- return {
- event,
- listeners,
- };
-}
-
 export function accumulateSinglePhaseListeners(
  targetFiber: Fiber | null,
- dispatchQueue: DispatchQueue,
- event: ReactSyntheticEvent,
+ reactName: string | null,
+ nativeEventType: string,
  inCapturePhase: boolean,
  accumulateTargetOnly: boolean,
-): void {
- const bubbleName = event._reactName;
- const captureName = bubbleName !== null ? bubbleName + 'Capture' : null;
- const reactEventName = inCapturePhase ? captureName : bubbleName;
+): Array<DispatchListener> {
+ const captureName = reactName !== null ? reactName + 'Capture' : null;
+ const reactEventName = inCapturePhase ? captureName : reactName;
  const listeners: Array<DispatchListener> = [];
 
  let instance = targetFiber;
  let lastHostComponent = null;
- const targetType = event.nativeEvent.type;
 
  // Accumulate all instances and listeners via the target -> root path.
  while (instance !== null) {
@@ -749,7 +737,10 @@ export function accumulateSinglePhaseListeners(
  );
  if (eventHandlerListeners !== null) {
  eventHandlerListeners.forEach(entry => {
- if (entry.type === targetType && entry.capture === inCapturePhase) {
+ if (
+ entry.type === nativeEventType &&
+ entry.capture === inCapturePhase
+ ) {
  listeners.push(
  createDispatchListener(
  instance,
@@ -785,7 +776,10 @@ export function accumulateSinglePhaseListeners(
  );
  if (eventHandlerListeners !== null) {
  eventHandlerListeners.forEach(entry => {
- if (entry.type === targetType && entry.capture === inCapturePhase) {
+ if (
+ entry.type === nativeEventType &&
+ entry.capture === inCapturePhase
+ ) {
  listeners.push(
  createDispatchListener(
  instance,
@@ -805,9 +799,7 @@ export function accumulateSinglePhaseListeners(
  }
  instance = instance.return;
  }
- if (listeners.length !== 0) {
- dispatchQueue.push(createDispatchEntry(event, listeners));
- }
+ return listeners;
 }
 
 // We should only use this function for:
@@ -819,11 +811,9 @@ export function accumulateSinglePhaseListeners(
 // phase event listeners (via emulation).
 export function accumulateTwoPhaseListeners(
  targetFiber: Fiber | null,
- dispatchQueue: DispatchQueue,
- event: ReactSyntheticEvent,
-): void {
- const bubbleName = event._reactName;
- const captureName = bubbleName !== null ? bubbleName + 'Capture' : null;
+ reactName: string,
+): Array<DispatchListener> {
+ const captureName = reactName + 'Capture';
  const listeners: Array<DispatchListener> = [];
  let instance = targetFiber;
 
@@ -833,29 +823,22 @@ export function accumulateTwoPhaseListeners(
  // Handle listeners that are on HostComponents (i.e. <div>)
  if (tag === HostComponent && stateNode !== null) {
  const currentTarget = stateNode;
- // Standard React on* listeners, i.e. onClick prop
- if (captureName !== null) {
- const captureListener = getListener(instance, captureName);
- if (captureListener != null) {
- listeners.unshift(
- createDispatchListener(instance, captureListener, currentTarget),
- );
- }
+ const captureListener = getListener(instance, captureName);
+ if (captureListener != null) {
+ listeners.unshift(
+ createDispatchListener(instance, captureListener, currentTarget),
+ );
  }
- if (bubbleName !== null) {
- const bubbleListener = getListener(instance, bubbleName);
- if (bubbleListener != null) {
- listeners.push(
- createDispatchListener(instance, bubbleListener, currentTarget),
- );
- }
+ const bubbleListener = getListener(instance, reactName);
+ if (bubbleListener != null) {
+ listeners.push(
+ createDispatchListener(instance, bubbleListener, currentTarget),
+ );
  }
  }
  instance = instance.return;
  }
- if (listeners.length !== 0) {
- dispatchQueue.push(createDispatchEntry(event, listeners));
- }
+ return listeners;
 }
 
 function getParent(inst: Fiber | null): Fiber | null {
@@ -956,7 +939,7 @@ function accumulateEnterLeaveListenersForEvent(
  instance = instance.return;
  }
  if (listeners.length !== 0) {
- dispatchQueue.push(createDispatchEntry(event, listeners));
+ dispatchQueue.push({event, listeners});
  }
 }
 
@@ -995,27 +978,23 @@ export function accumulateEnterLeaveTwoPhaseListeners(
 }
 
 export function accumulateEventHandleNonManagedNodeListeners(
- dispatchQueue: DispatchQueue,
- event: ReactSyntheticEvent,
+ reactEventType: DOMEventName,
  currentTarget: EventTarget,
  inCapturePhase: boolean,
-): void {
+): Array<DispatchListener> {
  const listeners: Array<DispatchListener> = [];
 
  const eventListeners = getEventHandlerListeners(currentTarget);
  if (eventListeners !== null) {
- const targetType = ((event.type: any): DOMEventName);
  eventListeners.forEach(entry => {
- if (entry.type === targetType && entry.capture === inCapturePhase) {
+ if (entry.type === reactEventType && entry.capture === inCapturePhase) {
  listeners.push(
  createDispatchListener(null, entry.callback, currentTarget),
  );
  }
  });
  }
- if (listeners.length !== 0) {
- dispatchQueue.push(createDispatchEntry(event, listeners));
- }
+ return listeners;
 }
 
 export function getListenerSetKey(

packages/react-dom/src/events/plugins/BeforeInputEventPlugin.js

@@ -226,23 +226,25 @@ function extractCompositionEvent(
  }
  }
 
- const event = new SyntheticCompositionEvent(
- eventType,
- domEventName,
- null,
- nativeEvent,
- nativeEventTarget,
- );
- accumulateTwoPhaseListeners(targetInst, dispatchQueue, event);
-
- if (fallbackData) {
- // Inject data generated from fallback path into the synthetic event.
- // This matches the property of native CompositionEventInterface.
- event.data = fallbackData;
- } else {
- const customData = getDataFromCustomEvent(nativeEvent);
- if (customData !== null) {
- event.data = customData;
+ const listeners = accumulateTwoPhaseListeners(targetInst, eventType);
+ if (listeners.length > 0) {
+ const event = new SyntheticCompositionEvent(
+ eventType,
+ domEventName,
+ null,
+ nativeEvent,
+ nativeEventTarget,
+ );
+ dispatchQueue.push({event, listeners});
+ if (fallbackData) {
+ // Inject data generated from fallback path into the synthetic event.
+ // This matches the property of native CompositionEventInterface.
+ event.data = fallbackData;
+ } else {
+ const customData = getDataFromCustomEvent(nativeEvent);
+ if (customData !== null) {
+ event.data = customData;
+ }
  }
  }
 }
@@ -394,15 +396,18 @@ function extractBeforeInputEvent(
  return null;
  }
 
- const event = new SyntheticInputEvent(
- 'onBeforeInput',
- 'beforeinput',
- null,
- nativeEvent,
- nativeEventTarget,
- );
- accumulateTwoPhaseListeners(targetInst, dispatchQueue, event);
- event.data = chars;
+ const listeners = accumulateTwoPhaseListeners(targetInst, 'onBeforeInput');
+ if (listeners.length > 0) {
+ const event = new SyntheticInputEvent(
+ 'onBeforeInput',
+ 'beforeinput',
+ null,
+ nativeEvent,
+ nativeEventTarget,
+ );
+ dispatchQueue.push({event, listeners});
+ event.data = chars;
+ }
 }
 
 /**

packages/react-dom/src/events/plugins/ChangeEventPlugin.js

@@ -49,16 +49,19 @@ function createAndAccumulateChangeEvent(
  nativeEvent,
  target,
 ) {
- const event = new SyntheticEvent(
- 'onChange',
- 'change',
- null,
- nativeEvent,
- target,
- );
  // Flag this event loop as needing state restore.
  enqueueStateRestore(((target: any): Node));
- accumulateTwoPhaseListeners(inst, dispatchQueue, event);
+ const listeners = accumulateTwoPhaseListeners(inst, 'onChange');
+ if (listeners.length > 0) {
+ const event = new SyntheticEvent(
+ 'onChange',
+ 'change',
+ null,
+ nativeEvent,
+ target,
+ );
+ dispatchQueue.push({event, listeners});
+ }
 }
 /**
  * For IE shims

packages/react-dom/src/events/plugins/SelectEventPlugin.js

@@ -113,20 +113,21 @@ function constructSelectEvent(dispatchQueue, nativeEvent, nativeEventTarget) {
  if (!lastSelection || !shallowEqual(lastSelection, currentSelection)) {
  lastSelection = currentSelection;
 
- const syntheticEvent = new SyntheticEvent(
- 'onSelect',
- 'select',
- null,
- nativeEvent,
- nativeEventTarget,
- );
- syntheticEvent.target = activeElement;
-
- accumulateTwoPhaseListeners(
+ const listeners = accumulateTwoPhaseListeners(
  activeElementInst,
- dispatchQueue,
- syntheticEvent,
+ 'onSelect',
  );
+ if (listeners.length > 0) {
+ const event = new SyntheticEvent(
+ 'onSelect',
+ 'select',
+ null,
+ nativeEvent,
+ nativeEventTarget,
+ );
+ dispatchQueue.push({event, listeners});
+ event.target = activeElement;
+ }
  }
 }
 

packages/react-dom/src/events/plugins/SimpleEventPlugin.js

@@ -63,7 +63,7 @@ function extractEvents(
  return;
  }
  let SyntheticEventCtor = SyntheticEvent;
- let reactEventType = domEventName;
+ let reactEventType: string = domEventName;
  switch (domEventName) {
  case 'keypress':
  // Firefox creates a keypress event for function keys too. This removes
@@ -157,25 +157,30 @@ function extractEvents(
  // Unknown event. This is used by createEventHandle.
  break;
  }
- const event = new SyntheticEventCtor(
- reactName,
- reactEventType,
- null,
- nativeEvent,
- nativeEventTarget,
- );
 
  const inCapturePhase = (eventSystemFlags & IS_CAPTURE_PHASE) !== 0;
  if (
  enableCreateEventHandleAPI &&
  eventSystemFlags & IS_EVENT_HANDLE_NON_MANAGED_NODE
  ) {
- accumulateEventHandleNonManagedNodeListeners(
- dispatchQueue,
- event,
+ const listeners = accumulateEventHandleNonManagedNodeListeners(
+ // TODO: this cast may not make sense for events like
+ // "focus" where React listens to e.g. "focusin".
+ ((reactEventType: any): DOMEventName),
  targetContainer,
  inCapturePhase,
  );
+ if (listeners.length > 0) {
+ // Intentionally create event lazily.
+ const event = new SyntheticEventCtor(
+ reactName,
+ reactEventType,
+ null,
+ nativeEvent,
+ nativeEventTarget,
+ );
+ dispatchQueue.push({event, listeners});
+ }
  } else {
  // Some events don't bubble in the browser.
  // In the past, React has always bubbled them, but this can be surprising.
@@ -189,13 +194,24 @@ function extractEvents(
  // This is a breaking change that can wait until React 18.
  domEventName === 'scroll';
 
- accumulateSinglePhaseListeners(
+ const listeners = accumulateSinglePhaseListeners(
  targetInst,
- dispatchQueue,
- event,
+ reactName,
+ nativeEvent.type,
  inCapturePhase,
  accumulateTargetOnly,
  );
+ if (listeners.length > 0) {
+ // Intentionally create event lazily.
+ const event = new SyntheticEventCtor(
+ reactName,
+ reactEventType,
+ null,
+ nativeEvent,
+ nativeEventTarget,
+ );
+ dispatchQueue.push({event, listeners});
+ }
  }
 }