{"parents":["6d4f85b611cd7bac40db44854bab06776ce30c96"],"patch":"diff --git a\/packages\/events\/ReactGenericBatching.js b\/packages\/events\/ReactGenericBatching.js\nindex 78aff1d551..7169b795c6 100644\n--- a\/packages\/events\/ReactGenericBatching.js\n+++ b\/packages\/events\/ReactGenericBatching.js\n@@ -17,15 +17,33 @@ import {\n \/\/ scheduled work and instead do synchronous work.\n \n \/\/ Defaults\n-let _batchedUpdatesImpl = function(fn, bookkeeping) {\n+let batchedUpdatesImpl = function(fn, bookkeeping) {\n return fn(bookkeeping);\n };\n-let _interactiveUpdatesImpl = function(fn, a, b, c) {\n+let discreteUpdatesImpl = function(fn, a, b, c) {\n return fn(a, b, c);\n };\n-let _flushInteractiveUpdatesImpl = function() {};\n+let flushDiscreteUpdatesImpl = function() {};\n+let batchedEventUpdatesImpl = batchedUpdatesImpl;\n \n let isBatching = false;\n+\n+function batchedUpdatesFinally() {\n+ \/\/ Here we wait until all updates have propagated, which is important\n+ \/\/ when using controlled components within layers:\n+ \/\/ https:\/\/github.com\/facebook\/react\/issues\/1698\n+ \/\/ Then we restore state of any controlled component.\n+ isBatching = false;\n+ const controlledComponentsHavePendingUpdates = needsStateRestore();\n+ if (controlledComponentsHavePendingUpdates) {\n+ \/\/ If a controlled event was fired, we may need to restore the state of\n+ \/\/ the DOM node back to the controlled value. This is necessary when React\n+ \/\/ bails out of the update without touching the DOM.\n+ flushDiscreteUpdatesImpl();\n+ restoreStateIfNeeded();\n+ }\n+}\n+\n export function batchedUpdates(fn, bookkeeping) {\n if (isBatching) {\n \/\/ If we are currently inside another batch, we need to wait until it\n@@ -34,38 +52,42 @@ export function batchedUpdates(fn, bookkeeping) {\n }\n isBatching = true;\n try {\n- return _batchedUpdatesImpl(fn, bookkeeping);\n+ return batchedUpdatesImpl(fn, bookkeeping);\n+ } finally {\n+ batchedUpdatesFinally();\n+ }\n+}\n+\n+export function batchedEventUpdates(fn, bookkeeping) {\n+ if (isBatching) {\n+ \/\/ If we are currently inside another batch, we need to wait until it\n+ \/\/ fully completes before restoring state.\n+ return fn(bookkeeping);\n+ }\n+ isBatching = true;\n+ try {\n+ return batchedEventUpdatesImpl(fn, bookkeeping);\n } finally {\n- \/\/ Here we wait until all updates have propagated, which is important\n- \/\/ when using controlled components within layers:\n- \/\/ https:\/\/github.com\/facebook\/react\/issues\/1698\n- \/\/ Then we restore state of any controlled component.\n- isBatching = false;\n- const controlledComponentsHavePendingUpdates = needsStateRestore();\n- if (controlledComponentsHavePendingUpdates) {\n- \/\/ If a controlled event was fired, we may need to restore the state of\n- \/\/ the DOM node back to the controlled value. This is necessary when React\n- \/\/ bails out of the update without touching the DOM.\n- _flushInteractiveUpdatesImpl();\n- restoreStateIfNeeded();\n- }\n+ batchedUpdatesFinally();\n }\n }\n \n-export function interactiveUpdates(fn, a, b, c) {\n- return _interactiveUpdatesImpl(fn, a, b, c);\n+export function discreteUpdates(fn, a, b, c) {\n+ return discreteUpdatesImpl(fn, a, b, c);\n }\n \n-export function flushInteractiveUpdates() {\n- return _flushInteractiveUpdatesImpl();\n+export function flushDiscreteUpdates() {\n+ return flushDiscreteUpdatesImpl();\n }\n \n export function setBatchingImplementation(\n- batchedUpdatesImpl,\n- interactiveUpdatesImpl,\n- flushInteractiveUpdatesImpl,\n+ _batchedUpdatesImpl,\n+ _discreteUpdatesImpl,\n+ _flushDiscreteUpdatesImpl,\n+ _batchedEventUpdatesImpl,\n ) {\n- _batchedUpdatesImpl = batchedUpdatesImpl;\n- _interactiveUpdatesImpl = interactiveUpdatesImpl;\n- _flushInteractiveUpdatesImpl = flushInteractiveUpdatesImpl;\n+ batchedUpdatesImpl = _batchedUpdatesImpl;\n+ discreteUpdatesImpl = _discreteUpdatesImpl;\n+ flushDiscreteUpdatesImpl = _flushDiscreteUpdatesImpl;\n+ batchedEventUpdatesImpl = _batchedEventUpdatesImpl;\n }\ndiff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMFiber-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMFiber-test.js\nindex c19777e7e5..a664ed5d95 100644\n--- a\/packages\/react-dom\/src\/__tests__\/ReactDOMFiber-test.js\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMFiber-test.js\n@@ -1026,9 +1026,15 @@ describe('ReactDOMFiber', () => {\n \n it('should not update event handlers until commit', () => {\n let ops = [];\n+ let eventErrors = [];\n const handlerA = () => ops.push('A');\n const handlerB = () => ops.push('B');\n \n+ spyOnProd(console, 'error');\n+ window.addEventListener('error', e => {\n+ eventErrors.push(e.message);\n+ });\n+\n class Example extends React.Component {\n state = {flip: false, count: 0};\n flip() {\n@@ -1090,12 +1096,16 @@ describe('ReactDOMFiber', () => {\n \n \/\/ Because the new click handler has not yet committed, we should still\n \/\/ invoke B.\n- expect(ops).toEqual(['B']);\n+ expect(ops).toEqual([]);\n ops = [];\n \n \/\/ Any click that happens after commit, should invoke A.\n node.click();\n expect(ops).toEqual(['A']);\n+ expect(eventErrors[0]).toEqual(\n+ 'unstable_flushDiscreteUpdates: Cannot flush ' +\n+ 'updates when React is already rendering.',\n+ );\n });\n \n it('should not crash encountering low-priority tree', () => {\ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOM.js b\/packages\/react-dom\/src\/client\/ReactDOM.js\nindex 011902b045..3629ed3e1d 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOM.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOM.js\n@@ -26,10 +26,11 @@ import {\n flushRoot,\n createContainer,\n updateContainer,\n+ batchedEventUpdates,\n batchedUpdates,\n unbatchedUpdates,\n- interactiveUpdates,\n- flushInteractiveUpdates,\n+ discreteUpdates,\n+ flushDiscreteUpdates,\n flushSync,\n flushControlled,\n injectIntoDevTools,\n@@ -481,8 +482,9 @@ function shouldHydrateDueToLegacyHeuristic(container) {\n \n setBatchingImplementation(\n batchedUpdates,\n- interactiveUpdates,\n- flushInteractiveUpdates,\n+ discreteUpdates,\n+ flushDiscreteUpdates,\n+ batchedEventUpdates,\n );\n \n let warnedAboutHydrateAPI = false;\n@@ -783,7 +785,14 @@ const ReactDOM: Object = {\n \n unstable_batchedUpdates: batchedUpdates,\n \n- unstable_interactiveUpdates: interactiveUpdates,\n+ \/\/ TODO remove this legacy method, unstable_discreteUpdates replaces it\n+ unstable_interactiveUpdates: (fn, a, b, c) => {\n+ flushDiscreteUpdates();\n+ return discreteUpdates(fn, a, b, c);\n+ },\n+\n+ unstable_discreteUpdates: discreteUpdates,\n+ unstable_flushDiscreteUpdates: flushDiscreteUpdates,\n \n flushSync: flushSync,\n \ndiff --git a\/packages\/react-dom\/src\/events\/DOMEventResponderSystem.js b\/packages\/react-dom\/src\/events\/DOMEventResponderSystem.js\nindex b4f3871df8..c1bc1d780c 100644\n--- a\/packages\/react-dom\/src\/events\/DOMEventResponderSystem.js\n+++ b\/packages\/react-dom\/src\/events\/DOMEventResponderSystem.js\n@@ -25,7 +25,11 @@ import type {\n ReactResponderEvent,\n } from 'shared\/ReactTypes';\n import type {DOMTopLevelEventType} from 'events\/TopLevelEventTypes';\n-import {batchedUpdates, interactiveUpdates} from 'events\/ReactGenericBatching';\n+import {\n+ batchedEventUpdates,\n+ discreteUpdates,\n+ flushDiscreteUpdates,\n+} from 'events\/ReactGenericBatching';\n import type {Fiber} from 'react-reconciler\/src\/ReactFiber';\n import warning from 'shared\/warning';\n import {enableEventAPI} from 'shared\/ReactFeatureFlags';\n@@ -601,11 +605,14 @@ export function processEventQueue(): void {\n return;\n }\n if (discrete) {\n- interactiveUpdates(() => {\n- batchedUpdates(processEvents, events);\n+ if (shouldflushDiscreteUpdates(currentTimeStamp)) {\n+ flushDiscreteUpdates();\n+ }\n+ discreteUpdates(() => {\n+ batchedEventUpdates(processEvents, events);\n });\n } else {\n- batchedUpdates(processEvents, events);\n+ batchedEventUpdates(processEvents, events);\n }\n }\n \n@@ -1004,3 +1011,25 @@ export function generateListeningKey(\n const passiveKey = passive ? '_passive' : '_active';\n return `${topLevelType}${passiveKey}`;\n }\n+\n+let lastDiscreteEventTimeStamp = 0;\n+\n+export function shouldflushDiscreteUpdates(timeStamp: number): boolean {\n+ \/\/ event.timeStamp isn't overly reliable due to inconsistencies in\n+ \/\/ how different browsers have historically provided the time stamp.\n+ \/\/ Some browsers provide high-resolution time stamps for all events,\n+ \/\/ some provide low-resoltion time stamps for all events. FF < 52\n+ \/\/ even mixes both time stamps together. Some browsers even report\n+ \/\/ negative time stamps or time stamps that are 0 (iOS9) in some cases.\n+ \/\/ Given we are only comparing two time stamps with equality (!==),\n+ \/\/ we are safe from the resolution differences. If the time stamp is 0\n+ \/\/ we bail-out of preventing the flush, which can affect semantics,\n+ \/\/ such as if an earlier flush removes or adds event listeners that\n+ \/\/ are fired in the subsequent flush. However, this is the same\n+ \/\/ behaviour as we had before this change, so the risks are low.\n+ if (timeStamp === 0 || lastDiscreteEventTimeStamp !== timeStamp) {\n+ lastDiscreteEventTimeStamp = timeStamp;\n+ return true;\n+ }\n+ return false;\n+}\ndiff --git a\/packages\/react-dom\/src\/events\/ReactDOMEventListener.js b\/packages\/react-dom\/src\/events\/ReactDOMEventListener.js\nindex 813f978ead..a7749f5e8a 100644\n--- a\/packages\/react-dom\/src\/events\/ReactDOMEventListener.js\n+++ b\/packages\/react-dom\/src\/events\/ReactDOMEventListener.js\n@@ -11,9 +11,16 @@ import type {AnyNativeEvent} from 'events\/PluginModuleType';\n import type {Fiber} from 'react-reconciler\/src\/ReactFiber';\n import type {DOMTopLevelEventType} from 'events\/TopLevelEventTypes';\n \n-import {batchedUpdates, interactiveUpdates} from 'events\/ReactGenericBatching';\n+import {\n+ batchedEventUpdates,\n+ discreteUpdates,\n+ flushDiscreteUpdates,\n+} from 'events\/ReactGenericBatching';\n import {runExtractedPluginEventsInBatch} from 'events\/EventPluginHub';\n-import {dispatchEventForResponderEventSystem} from '..\/events\/DOMEventResponderSystem';\n+import {\n+ dispatchEventForResponderEventSystem,\n+ shouldflushDiscreteUpdates,\n+} from '..\/events\/DOMEventResponderSystem';\n import {isFiberMounted} from 'react-reconciler\/reflection';\n import {HostRoot} from 'shared\/ReactWorkTags';\n import {\n@@ -188,7 +195,7 @@ export function trapEventForResponderEventSystem(\n } else {\n eventFlags |= IS_ACTIVE;\n }\n- \/\/ Check if interactive and wrap in interactiveUpdates\n+ \/\/ Check if interactive and wrap in discreteUpdates\n const listener = dispatchEvent.bind(null, topLevelType, eventFlags);\n if (passiveBrowserEventsSupported) {\n addEventCaptureListenerWithPassiveFlag(\n@@ -212,7 +219,7 @@ function trapEventForPluginEventSystem(\n ? dispatchInteractiveEvent\n : dispatchEvent;\n const rawEventName = getRawEventName(topLevelType);\n- \/\/ Check if interactive and wrap in interactiveUpdates\n+ \/\/ Check if interactive and wrap in discreteUpdates\n const listener = dispatch.bind(null, topLevelType, PLUGIN_EVENT_SYSTEM);\n if (capture) {\n addEventCaptureListener(element, rawEventName, listener);\n@@ -222,12 +229,10 @@ function trapEventForPluginEventSystem(\n }\n \n function dispatchInteractiveEvent(topLevelType, eventSystemFlags, nativeEvent) {\n- interactiveUpdates(\n- dispatchEvent,\n- topLevelType,\n- eventSystemFlags,\n- nativeEvent,\n- );\n+ if (!enableEventAPI || shouldflushDiscreteUpdates(nativeEvent.timeStamp)) {\n+ flushDiscreteUpdates();\n+ }\n+ discreteUpdates(dispatchEvent, topLevelType, eventSystemFlags, nativeEvent);\n }\n \n function dispatchEventForPluginEventSystem(\n@@ -245,7 +250,7 @@ function dispatchEventForPluginEventSystem(\n try {\n \/\/ Event queue being processed in the same cycle allows\n \/\/ `preventDefault`.\n- batchedUpdates(handleTopLevel, bookKeeping);\n+ batchedEventUpdates(handleTopLevel, bookKeeping);\n } finally {\n releaseTopLevelCallbackBookKeeping(bookKeeping);\n }\ndiff --git a\/packages\/react-dom\/src\/fire\/ReactFire.js b\/packages\/react-dom\/src\/fire\/ReactFire.js\nindex 01a71bd7cf..6b22b7c43d 100644\n--- a\/packages\/react-dom\/src\/fire\/ReactFire.js\n+++ b\/packages\/react-dom\/src\/fire\/ReactFire.js\n@@ -31,10 +31,11 @@ import {\n flushRoot,\n createContainer,\n updateContainer,\n+ batchedEventUpdates,\n batchedUpdates,\n unbatchedUpdates,\n- interactiveUpdates,\n- flushInteractiveUpdates,\n+ discreteUpdates,\n+ flushDiscreteUpdates,\n flushSync,\n flushControlled,\n injectIntoDevTools,\n@@ -487,8 +488,9 @@ function shouldHydrateDueToLegacyHeuristic(container) {\n \n setBatchingImplementation(\n batchedUpdates,\n- interactiveUpdates,\n- flushInteractiveUpdates,\n+ discreteUpdates,\n+ flushDiscreteUpdates,\n+ batchedEventUpdates,\n );\n \n let warnedAboutHydrateAPI = false;\n@@ -789,7 +791,14 @@ const ReactDOM: Object = {\n \n unstable_batchedUpdates: batchedUpdates,\n \n- unstable_interactiveUpdates: interactiveUpdates,\n+ \/\/ TODO remove this legacy method, unstable_discreteUpdates replaces it\n+ unstable_interactiveUpdates: (fn, a, b, c) => {\n+ flushDiscreteUpdates();\n+ return discreteUpdates(fn, a, b, c);\n+ },\n+\n+ unstable_discreteUpdates: discreteUpdates,\n+ unstable_flushDiscreteUpdates: flushDiscreteUpdates,\n \n flushSync: flushSync,\n \ndiff --git a\/packages\/react-events\/src\/__tests__\/Press-test.internal.js b\/packages\/react-events\/src\/__tests__\/Press-test.internal.js\nindex b8a5f2f58c..c3d73bf78f 100644\n--- a\/packages\/react-events\/src\/__tests__\/Press-test.internal.js\n+++ b\/packages\/react-events\/src\/__tests__\/Press-test.internal.js\n@@ -13,6 +13,7 @@ let React;\n let ReactFeatureFlags;\n let ReactDOM;\n let Press;\n+let Scheduler;\n \n const DEFAULT_LONG_PRESS_DELAY = 500;\n \n@@ -45,6 +46,7 @@ describe('Event responder: Press', () => {\n React = require('react');\n ReactDOM = require('react-dom');\n Press = require('react-events\/press');\n+ Scheduler = require('scheduler');\n \n container = document.createElement('div');\n document.body.appendChild(container);\n@@ -2301,4 +2303,142 @@ describe('Event responder: Press', () => {\n },\n ]);\n });\n+\n+ function dispatchEventWithTimeStamp(elem, name, timeStamp) {\n+ const event = createEvent(name);\n+ Object.defineProperty(event, 'timeStamp', {\n+ value: timeStamp,\n+ });\n+ elem.dispatchEvent(event);\n+ }\n+\n+ it('should properly only flush sync once when the event systems are mixed', () => {\n+ const ref = React.createRef();\n+ let renderCounts = 0;\n+\n+ function MyComponent() {\n+ const [, updateCounter] = React.useState(0);\n+ renderCounts++;\n+\n+ function handlePress() {\n+ updateCounter(count => count + 1);\n+ }\n+\n+ return (\n+

\n+ \n+ {\n+ updateCounter(count => count + 1);\n+ }}>\n+ Press me\n+ <\/button>\n+ <\/Press>\n+ <\/div>\n+ );\n+ }\n+\n+ const newContainer = document.createElement('div');\n+ const root = ReactDOM.unstable_createRoot(newContainer);\n+ document.body.appendChild(newContainer);\n+ root.render();\n+ Scheduler.flushAll();\n+\n+ dispatchEventWithTimeStamp(ref.current, 'pointerdown', 100);\n+ dispatchEventWithTimeStamp(ref.current, 'pointerup', 100);\n+ dispatchEventWithTimeStamp(ref.current, 'click', 100);\n+\n+ if (__DEV__) {\n+ expect(renderCounts).toBe(2);\n+ } else {\n+ expect(renderCounts).toBe(1);\n+ }\n+ Scheduler.flushAll();\n+ if (__DEV__) {\n+ expect(renderCounts).toBe(4);\n+ } else {\n+ expect(renderCounts).toBe(2);\n+ }\n+\n+ dispatchEventWithTimeStamp(ref.current, 'pointerdown', 100);\n+ dispatchEventWithTimeStamp(ref.current, 'pointerup', 100);\n+ \/\/ Ensure the timeStamp logic works\n+ dispatchEventWithTimeStamp(ref.current, 'click', 101);\n+\n+ if (__DEV__) {\n+ expect(renderCounts).toBe(6);\n+ } else {\n+ expect(renderCounts).toBe(3);\n+ }\n+\n+ Scheduler.flushAll();\n+ document.body.removeChild(newContainer);\n+ });\n+\n+ it('should properly flush sync when the event systems are mixed with unstable_flushDiscreteUpdates', () => {\n+ const ref = React.createRef();\n+ let renderCounts = 0;\n+\n+ function MyComponent() {\n+ const [, updateCounter] = React.useState(0);\n+ renderCounts++;\n+\n+ function handlePress() {\n+ updateCounter(count => count + 1);\n+ }\n+\n+ return (\n+

\n+ \n+ {\n+ \/\/ This should flush synchronously\n+ ReactDOM.unstable_flushDiscreteUpdates();\n+ updateCounter(count => count + 1);\n+ }}>\n+ Press me\n+ <\/button>\n+ <\/Press>\n+ <\/div>\n+ );\n+ }\n+\n+ const newContainer = document.createElement('div');\n+ const root = ReactDOM.unstable_createRoot(newContainer);\n+ document.body.appendChild(newContainer);\n+ root.render();\n+ Scheduler.flushAll();\n+\n+ dispatchEventWithTimeStamp(ref.current, 'pointerdown', 100);\n+ dispatchEventWithTimeStamp(ref.current, 'pointerup', 100);\n+ dispatchEventWithTimeStamp(ref.current, 'click', 100);\n+\n+ if (__DEV__) {\n+ expect(renderCounts).toBe(4);\n+ } else {\n+ expect(renderCounts).toBe(2);\n+ }\n+ Scheduler.flushAll();\n+ if (__DEV__) {\n+ expect(renderCounts).toBe(6);\n+ } else {\n+ expect(renderCounts).toBe(3);\n+ }\n+\n+ dispatchEventWithTimeStamp(ref.current, 'pointerdown', 100);\n+ dispatchEventWithTimeStamp(ref.current, 'pointerup', 100);\n+ \/\/ Ensure the timeStamp logic works\n+ dispatchEventWithTimeStamp(ref.current, 'click', 101);\n+\n+ if (__DEV__) {\n+ expect(renderCounts).toBe(8);\n+ } else {\n+ expect(renderCounts).toBe(4);\n+ }\n+\n+ Scheduler.flushAll();\n+ document.body.removeChild(newContainer);\n+ });\n });\ndiff --git a\/packages\/react-native-renderer\/src\/ReactFabric.js b\/packages\/react-native-renderer\/src\/ReactFabric.js\nindex 0e4bbc51d9..f4f499a0b7 100644\n--- a\/packages\/react-native-renderer\/src\/ReactFabric.js\n+++ b\/packages\/react-native-renderer\/src\/ReactFabric.js\n@@ -15,9 +15,10 @@ import '.\/ReactFabricInjection';\n import {\n findHostInstance,\n findHostInstanceWithWarning,\n+ batchedEventUpdates,\n batchedUpdates as batchedUpdatesImpl,\n- interactiveUpdates,\n- flushInteractiveUpdates,\n+ discreteUpdates,\n+ flushDiscreteUpdates,\n createContainer,\n updateContainer,\n injectIntoDevTools,\n@@ -94,8 +95,9 @@ function findNodeHandle(componentOrHandle: any): ?number {\n \n setBatchingImplementation(\n batchedUpdatesImpl,\n- interactiveUpdates,\n- flushInteractiveUpdates,\n+ discreteUpdates,\n+ flushDiscreteUpdates,\n+ batchedEventUpdates,\n );\n \n const roots = new Map();\ndiff --git a\/packages\/react-native-renderer\/src\/ReactNativeRenderer.js b\/packages\/react-native-renderer\/src\/ReactNativeRenderer.js\nindex 1c5bd87707..3d27d25c0a 100644\n--- a\/packages\/react-native-renderer\/src\/ReactNativeRenderer.js\n+++ b\/packages\/react-native-renderer\/src\/ReactNativeRenderer.js\n@@ -16,8 +16,9 @@ import {\n findHostInstance,\n findHostInstanceWithWarning,\n batchedUpdates as batchedUpdatesImpl,\n- interactiveUpdates,\n- flushInteractiveUpdates,\n+ batchedEventUpdates,\n+ discreteUpdates,\n+ flushDiscreteUpdates,\n createContainer,\n updateContainer,\n injectIntoDevTools,\n@@ -99,8 +100,9 @@ function findNodeHandle(componentOrHandle: any): ?number {\n \n setBatchingImplementation(\n batchedUpdatesImpl,\n- interactiveUpdates,\n- flushInteractiveUpdates,\n+ discreteUpdates,\n+ flushDiscreteUpdates,\n+ batchedEventUpdates,\n );\n \n function computeComponentStackForErrorReporting(reactTag: number): string {\ndiff --git a\/packages\/react-noop-renderer\/src\/createReactNoop.js b\/packages\/react-noop-renderer\/src\/createReactNoop.js\nindex 6cbaa5a659..4e4b2a9464 100644\n--- a\/packages\/react-noop-renderer\/src\/createReactNoop.js\n+++ b\/packages\/react-noop-renderer\/src\/createReactNoop.js\n@@ -1124,7 +1124,9 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {\n \n unbatchedUpdates: NoopRenderer.unbatchedUpdates,\n \n- interactiveUpdates: NoopRenderer.interactiveUpdates,\n+ discreteUpdates: NoopRenderer.discreteUpdates,\n+\n+ flushDiscreteUpdates: NoopRenderer.flushDiscreteUpdates,\n \n flushSync(fn: () => mixed) {\n NoopRenderer.flushSync(fn);\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberReconciler.js b\/packages\/react-reconciler\/src\/ReactFiberReconciler.js\nindex 84291f4b7a..d551e9633d 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberReconciler.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberReconciler.js\n@@ -46,14 +46,15 @@ import {\n computeExpirationForFiber,\n scheduleWork,\n flushRoot,\n+ batchedEventUpdates,\n batchedUpdates,\n unbatchedUpdates,\n flushSync,\n flushControlled,\n deferredUpdates,\n syncUpdates,\n- interactiveUpdates,\n- flushInteractiveUpdates,\n+ discreteUpdates,\n+ flushDiscreteUpdates,\n flushPassiveEffects,\n } from '.\/ReactFiberScheduler';\n import {createUpdate, enqueueUpdate} from '.\/ReactUpdateQueue';\n@@ -321,12 +322,13 @@ export function updateContainer(\n export {\n flushRoot,\n computeUniqueAsyncExpiration,\n+ batchedEventUpdates,\n batchedUpdates,\n unbatchedUpdates,\n deferredUpdates,\n syncUpdates,\n- interactiveUpdates,\n- flushInteractiveUpdates,\n+ discreteUpdates,\n+ flushDiscreteUpdates,\n flushControlled,\n flushSync,\n flushPassiveEffects,\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberScheduler.js b\/packages\/react-reconciler\/src\/ReactFiberScheduler.js\nindex 1aa46bd21d..83cfabd6bd 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberScheduler.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberScheduler.js\n@@ -178,13 +178,14 @@ const {\n ReactShouldWarnActingUpdates,\n } = ReactSharedInternals;\n \n-type WorkPhase = 0 | 1 | 2 | 3 | 4 | 5;\n+type WorkPhase = 0 | 1 | 2 | 3 | 4 | 5 | 6;\n const NotWorking = 0;\n const BatchedPhase = 1;\n const LegacyUnbatchedPhase = 2;\n const FlushSyncPhase = 3;\n const RenderPhase = 4;\n const CommitPhase = 5;\n+const BatchedEventPhase = 6;\n \n type RootExitStatus = 0 | 1 | 2 | 3 | 4;\n const RootIncomplete = 0;\n@@ -566,14 +567,22 @@ export function flushRoot(root: FiberRoot, expirationTime: ExpirationTime) {\n flushSyncCallbackQueue();\n }\n \n-export function flushInteractiveUpdates() {\n- if (workPhase === RenderPhase || workPhase === CommitPhase) {\n- \/\/ Can't synchronously flush interactive updates if React is already\n- \/\/ working. This is currently a no-op.\n- \/\/ TODO: Should we fire a warning? This happens if you synchronously invoke\n- \/\/ an input event inside an effect, like with `element.click()`.\n+export function flushDiscreteUpdates() {\n+ \/\/ TODO: we ideally do not want to early reurn for BatchedPhase here either.\n+ \/\/ Removing this causes act() tests to fail, so we should follow up.\n+ if (workPhase === CommitPhase || workPhase === BatchedPhase) {\n+ \/\/ We're inside the commit phase or batched phase, so we can't\n+ \/\/ synchronously flush pending work. This is probably a nested event\n+ \/\/ dispatch triggered by a lifecycle\/effect, like `el.focus()`. Exit.\n return;\n }\n+ if (workPhase === RenderPhase) {\n+ invariant(\n+ false,\n+ 'unstable_flushDiscreteUpdates: Cannot flush updates when React is ' +\n+ 'already rendering.',\n+ );\n+ }\n flushPendingDiscreteUpdates();\n if (!revertPassiveEffectsChange) {\n \/\/ If the discrete updates scheduled passive effects, flush them now so that\n@@ -604,21 +613,12 @@ export function deferredUpdates(fn: () => A): A {\n return runWithPriority(NormalPriority, fn);\n }\n \n-export function interactiveUpdates(\n+export function discreteUpdates(\n fn: (A, B, C) => R,\n a: A,\n b: B,\n c: C,\n ): R {\n- if (workPhase === NotWorking) {\n- \/\/ TODO: Remove this call. Instead of doing this automatically, the caller\n- \/\/ should explicitly call flushInteractiveUpdates.\n- flushPendingDiscreteUpdates();\n- }\n- if (!revertPassiveEffectsChange) {\n- \/\/ TODO: Remove this call for the same reason as above.\n- flushPassiveEffects();\n- }\n return runWithPriority(UserBlockingPriority, fn.bind(null, a, b, c));\n }\n \n@@ -660,8 +660,28 @@ export function batchedUpdates(fn: A => R, a: A): R {\n }\n }\n \n+export function batchedEventUpdates(fn: A => R, a: A): R {\n+ if (workPhase !== NotWorking) {\n+ \/\/ We're already working, or inside a batch, so batchedUpdates is a no-op.\n+ return fn(a);\n+ }\n+ const prevWorkPhase = workPhase;\n+ workPhase = BatchedEventPhase;\n+ try {\n+ return fn(a);\n+ } finally {\n+ workPhase = prevWorkPhase;\n+ \/\/ Flush the immediate callbacks that were scheduled during this batch\n+ flushSyncCallbackQueue();\n+ }\n+}\n+\n export function unbatchedUpdates(fn: (a: A) => R, a: A): R {\n- if (workPhase !== BatchedPhase && workPhase !== FlushSyncPhase) {\n+ if (\n+ workPhase !== BatchedPhase &&\n+ workPhase !== FlushSyncPhase &&\n+ workPhase !== BatchedEventPhase\n+ ) {\n \/\/ We're not inside batchedUpdates or flushSync, so unbatchedUpdates is\n \/\/ a no-op.\n return fn(a);\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactHooksWithNoopRenderer-test.internal.js b\/packages\/react-reconciler\/src\/__tests__\/ReactHooksWithNoopRenderer-test.internal.js\nindex 6308136220..ab257d7e56 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactHooksWithNoopRenderer-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactHooksWithNoopRenderer-test.internal.js\n@@ -885,7 +885,8 @@ describe('ReactHooksWithNoopRenderer', () => {\n \/\/ A discrete event forces the passive effect to be flushed --\n \/\/ updateCount(1) happens first, so 2 wins.\n \n- ReactNoop.interactiveUpdates(() => {\n+ ReactNoop.flushDiscreteUpdates();\n+ ReactNoop.discreteUpdates(() => {\n \/\/ (use batchedUpdates to silence the act() warning)\n ReactNoop.batchedUpdates(() => {\n _updateCount(2);\n@@ -939,7 +940,8 @@ describe('ReactHooksWithNoopRenderer', () => {\n \n \/\/ A discrete event forces the passive effect to be flushed --\n \/\/ updateCount(1) happens first, so 2 wins.\n- ReactNoop.interactiveUpdates(() => {\n+ ReactNoop.flushDiscreteUpdates();\n+ ReactNoop.discreteUpdates(() => {\n \/\/ use batchedUpdates to silence the act warning\n ReactNoop.batchedUpdates(() => _updateCount(2));\n });\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactSuspenseWithNoopRenderer-test.internal.js b\/packages\/react-reconciler\/src\/__tests__\/ReactSuspenseWithNoopRenderer-test.internal.js\nindex 1bcce162f9..fe7be36014 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactSuspenseWithNoopRenderer-test.internal.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactSuspenseWithNoopRenderer-test.internal.js\n@@ -431,7 +431,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {\n \n \/\/ Schedule a high pri update and a low pri update, without rendering in\n \/\/ between.\n- ReactNoop.interactiveUpdates(() => {\n+ ReactNoop.discreteUpdates(() => {\n \/\/ High pri\n ReactNoop.render();\n });\n@@ -1443,7 +1443,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {\n );\n }\n \n- ReactNoop.interactiveUpdates(() => ReactNoop.render());\n+ ReactNoop.discreteUpdates(() => ReactNoop.render());\n expect(Scheduler).toFlushAndYieldThrough(['Foo']);\n \n \/\/ Advance some time.\n@@ -1504,7 +1504,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {\n );\n }\n \n- ReactNoop.interactiveUpdates(() => ReactNoop.render());\n+ ReactNoop.discreteUpdates(() => ReactNoop.render());\n Scheduler.flushAll();\n \n \/\/ Warning is not flushed until the commit phase\n","files":[{"path":"packages\/events\/ReactGenericBatching.js","status":"M"},{"path":"packages\/react-dom\/src\/__tests__\/ReactDOMFiber-test.js","status":"M"},{"path":"packages\/react-dom\/src\/client\/ReactDOM.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/DOMEventResponderSystem.js","status":"M"},{"path":"packages\/react-dom\/src\/events\/ReactDOMEventListener.js","status":"M"},{"path":"packages\/react-dom\/src\/fire\/ReactFire.js","status":"M"},{"path":"packages\/react-events\/src\/__tests__\/Press-test.internal.js","status":"M"},{"path":"packages\/react-native-renderer\/src\/ReactFabric.js","status":"M"},{"path":"packages\/react-native-renderer\/src\/ReactNativeRenderer.js","status":"M"},{"path":"packages\/react-noop-renderer\/src\/createReactNoop.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberReconciler.js","status":"M"},{"path":"packages\/react-reconciler\/src\/ReactFiberScheduler.js","status":"M"},{"path":"packages\/react-reconciler\/src\/__tests__\/ReactHooksWithNoopRenderer-test.internal.js","status":"M"},{"path":"packages\/react-reconciler\/src\/__tests__\/ReactSuspenseWithNoopRenderer-test.internal.js","status":"M"}],"commit":{"subject":"[Flare] Update interactiveUpdates flushing heuristics (#15687)","authorEmail":"trueadm@users.noreply.github.com","revision":"ef4ac42f8893afd0240d2679db7438f1b599bbd4","shortRevision":"ef4ac42f88","authorName":"Dominic Gannaway","authoredAt":"2019-05-21T22:03:45+01:00"},"body":""}

dillon1000/react

Files changed