Skip to content

Commit

Permalink
Re-land "Support nesting of startTransition and flushSync (alt) (face…
Browse files Browse the repository at this point in the history 
…book#21149)"

This re-lands commit faa1e12.
  • Loading branch information
@acdlite
acdlite committed May 3, 2021
1 parent bacc870 commit aea7c2a
Show file tree
Hide file tree
Showing 4 changed files with 93 additions and 0 deletions.
6 changes: 6 additions & 0 deletions packages/react-dom/src/events/ReactDOMEventListener.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,9 @@ import {
getCurrentUpdatePriority,
setCurrentUpdatePriority,
} from 'react-reconciler/src/ReactEventPriorities';
import ReactSharedInternals from 'shared/ReactSharedInternals';

const {ReactCurrentBatchConfig} = ReactSharedInternals;

// TODO: can we stop exporting these?
export let _enabled = true;
Expand Down Expand Up @@ -125,11 +128,14 @@ function dispatchContinuousEvent(
nativeEvent,
) {
const previousPriority = getCurrentUpdatePriority();
const prevTransition = ReactCurrentBatchConfig.transition;
ReactCurrentBatchConfig.transition = 0;
try {
setCurrentUpdatePriority(ContinuousEventPriority);
dispatchEvent(domEventName, eventSystemFlags, container, nativeEvent);
} finally {
setCurrentUpdatePriority(previousPriority);
ReactCurrentBatchConfig.transition = prevTransition;
}
}

Expand Down
22 changes: 22 additions & 0 deletions packages/react-reconciler/src/ReactFiberWorkLoop.new.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -245,6 +245,7 @@ const ceil = Math.ceil;
const {
ReactCurrentDispatcher,
ReactCurrentOwner,
ReactCurrentBatchConfig,
IsSomeRendererActing,
} = ReactSharedInternals;

Expand Down Expand Up @@ -1062,11 +1063,14 @@ export function flushDiscreteUpdates() {

export function deferredUpdates<A>(fn: () => A): A {
const previousPriority = getCurrentUpdatePriority();
const prevTransition = ReactCurrentBatchConfig.transition;
try {
ReactCurrentBatchConfig.transition = 0;
setCurrentUpdatePriority(DefaultEventPriority);
return fn();
} finally {
setCurrentUpdatePriority(previousPriority);
ReactCurrentBatchConfig.transition = prevTransition;
}
}

Expand Down Expand Up @@ -1110,11 +1114,14 @@ export function discreteUpdates<A, B, C, D, R>(
d: D,
): R {
const previousPriority = getCurrentUpdatePriority();
const prevTransition = ReactCurrentBatchConfig.transition;
try {
ReactCurrentBatchConfig.transition = 0;
setCurrentUpdatePriority(DiscreteEventPriority);
return fn(a, b, c, d);
} finally {
setCurrentUpdatePriority(previousPriority);
ReactCurrentBatchConfig.transition = prevTransition;
if (executionContext === NoContext) {
resetRenderTimer();
}
Expand Down Expand Up @@ -1144,8 +1151,10 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
const prevExecutionContext = executionContext;
executionContext |= BatchedContext;

const prevTransition = ReactCurrentBatchConfig.transition;
const previousPriority = getCurrentUpdatePriority();
try {
ReactCurrentBatchConfig.transition = 0;
setCurrentUpdatePriority(DiscreteEventPriority);
if (fn) {
return fn(a);
Expand All @@ -1154,6 +1163,7 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
}
} finally {
setCurrentUpdatePriority(previousPriority);
ReactCurrentBatchConfig.transition = prevTransition;
executionContext = prevExecutionContext;
// Flush the immediate callbacks that were scheduled during this batch.
// Note that this will happen even if batchedUpdates is higher up
Expand All @@ -1175,12 +1185,15 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
export function flushControlled(fn: () => mixed): void {
const prevExecutionContext = executionContext;
executionContext |= BatchedContext;
const prevTransition = ReactCurrentBatchConfig.transition;
const previousPriority = getCurrentUpdatePriority();
try {
ReactCurrentBatchConfig.transition = 0;
setCurrentUpdatePriority(DiscreteEventPriority);
fn();
} finally {
setCurrentUpdatePriority(previousPriority);
ReactCurrentBatchConfig.transition = prevTransition;

executionContext = prevExecutionContext;
if (executionContext === NoContext) {
Expand Down Expand Up @@ -1675,10 +1688,13 @@ function commitRoot(root) {
// TODO: This no longer makes any sense. We already wrap the mutation and
// layout phases. Should be able to remove.
const previousUpdateLanePriority = getCurrentUpdatePriority();
const prevTransition = ReactCurrentBatchConfig.transition;
try {
ReactCurrentBatchConfig.transition = 0;
setCurrentUpdatePriority(DiscreteEventPriority);
commitRootImpl(root, previousUpdateLanePriority);
} finally {
ReactCurrentBatchConfig.transition = prevTransition;
setCurrentUpdatePriority(previousUpdateLanePriority);
}

Expand Down Expand Up @@ -1800,6 +1816,8 @@ function commitRootImpl(root, renderPriorityLevel) {
NoFlags;

if (subtreeHasEffects || rootHasEffect) {
const prevTransition = ReactCurrentBatchConfig.transition;
ReactCurrentBatchConfig.transition = 0;
const previousPriority = getCurrentUpdatePriority();
setCurrentUpdatePriority(DiscreteEventPriority);

Expand Down Expand Up @@ -1881,6 +1899,7 @@ function commitRootImpl(root, renderPriorityLevel) {

// Reset the priority to the previous non-sync value.
setCurrentUpdatePriority(previousPriority);
ReactCurrentBatchConfig.transition = prevTransition;
} else {
// No effects.
root.current = finishedWork;
Expand Down Expand Up @@ -2017,12 +2036,15 @@ export function flushPassiveEffects(): boolean {
if (rootWithPendingPassiveEffects !== null) {
const renderPriority = lanesToEventPriority(pendingPassiveEffectsLanes);
const priority = lowerEventPriority(DefaultEventPriority, renderPriority);
const prevTransition = ReactCurrentBatchConfig.transition;
const previousPriority = getCurrentUpdatePriority();
try {
ReactCurrentBatchConfig.transition = 0;
setCurrentUpdatePriority(priority);
return flushPassiveEffectsImpl();
} finally {
setCurrentUpdatePriority(previousPriority);
ReactCurrentBatchConfig.transition = prevTransition;
}
}
return false;
Expand Down
22 changes: 22 additions & 0 deletions packages/react-reconciler/src/ReactFiberWorkLoop.old.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -245,6 +245,7 @@ const ceil = Math.ceil;
const {
ReactCurrentDispatcher,
ReactCurrentOwner,
ReactCurrentBatchConfig,
IsSomeRendererActing,
} = ReactSharedInternals;

Expand Down Expand Up @@ -1062,11 +1063,14 @@ export function flushDiscreteUpdates() {

export function deferredUpdates<A>(fn: () => A): A {
const previousPriority = getCurrentUpdatePriority();
const prevTransition = ReactCurrentBatchConfig.transition;
try {
ReactCurrentBatchConfig.transition = 0;
setCurrentUpdatePriority(DefaultEventPriority);
return fn();
} finally {
setCurrentUpdatePriority(previousPriority);
ReactCurrentBatchConfig.transition = prevTransition;
}
}

Expand Down Expand Up @@ -1110,11 +1114,14 @@ export function discreteUpdates<A, B, C, D, R>(
d: D,
): R {
const previousPriority = getCurrentUpdatePriority();
const prevTransition = ReactCurrentBatchConfig.transition;
try {
ReactCurrentBatchConfig.transition = 0;
setCurrentUpdatePriority(DiscreteEventPriority);
return fn(a, b, c, d);
} finally {
setCurrentUpdatePriority(previousPriority);
ReactCurrentBatchConfig.transition = prevTransition;
if (executionContext === NoContext) {
resetRenderTimer();
}
Expand Down Expand Up @@ -1144,8 +1151,10 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
const prevExecutionContext = executionContext;
executionContext |= BatchedContext;

const prevTransition = ReactCurrentBatchConfig.transition;
const previousPriority = getCurrentUpdatePriority();
try {
ReactCurrentBatchConfig.transition = 0;
setCurrentUpdatePriority(DiscreteEventPriority);
if (fn) {
return fn(a);
Expand All @@ -1154,6 +1163,7 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
}
} finally {
setCurrentUpdatePriority(previousPriority);
ReactCurrentBatchConfig.transition = prevTransition;
executionContext = prevExecutionContext;
// Flush the immediate callbacks that were scheduled during this batch.
// Note that this will happen even if batchedUpdates is higher up
Expand All @@ -1175,12 +1185,15 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
export function flushControlled(fn: () => mixed): void {
const prevExecutionContext = executionContext;
executionContext |= BatchedContext;
const prevTransition = ReactCurrentBatchConfig.transition;
const previousPriority = getCurrentUpdatePriority();
try {
ReactCurrentBatchConfig.transition = 0;
setCurrentUpdatePriority(DiscreteEventPriority);
fn();
} finally {
setCurrentUpdatePriority(previousPriority);
ReactCurrentBatchConfig.transition = prevTransition;

executionContext = prevExecutionContext;
if (executionContext === NoContext) {
Expand Down Expand Up @@ -1675,10 +1688,13 @@ function commitRoot(root) {
// TODO: This no longer makes any sense. We already wrap the mutation and
// layout phases. Should be able to remove.
const previousUpdateLanePriority = getCurrentUpdatePriority();
const prevTransition = ReactCurrentBatchConfig.transition;
try {
ReactCurrentBatchConfig.transition = 0;
setCurrentUpdatePriority(DiscreteEventPriority);
commitRootImpl(root, previousUpdateLanePriority);
} finally {
ReactCurrentBatchConfig.transition = prevTransition;
setCurrentUpdatePriority(previousUpdateLanePriority);
}

Expand Down Expand Up @@ -1800,6 +1816,8 @@ function commitRootImpl(root, renderPriorityLevel) {
NoFlags;

if (subtreeHasEffects || rootHasEffect) {
const prevTransition = ReactCurrentBatchConfig.transition;
ReactCurrentBatchConfig.transition = 0;
const previousPriority = getCurrentUpdatePriority();
setCurrentUpdatePriority(DiscreteEventPriority);

Expand Down Expand Up @@ -1881,6 +1899,7 @@ function commitRootImpl(root, renderPriorityLevel) {

// Reset the priority to the previous non-sync value.
setCurrentUpdatePriority(previousPriority);
ReactCurrentBatchConfig.transition = prevTransition;
} else {
// No effects.
root.current = finishedWork;
Expand Down Expand Up @@ -2017,12 +2036,15 @@ export function flushPassiveEffects(): boolean {
if (rootWithPendingPassiveEffects !== null) {
const renderPriority = lanesToEventPriority(pendingPassiveEffectsLanes);
const priority = lowerEventPriority(DefaultEventPriority, renderPriority);
const prevTransition = ReactCurrentBatchConfig.transition;
const previousPriority = getCurrentUpdatePriority();
try {
ReactCurrentBatchConfig.transition = 0;
setCurrentUpdatePriority(priority);
return flushPassiveEffectsImpl();
} finally {
setCurrentUpdatePriority(previousPriority);
ReactCurrentBatchConfig.transition = prevTransition;
}
}
return false;
Expand Down
43 changes: 43 additions & 0 deletions packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ let ReactNoop;
let Scheduler;
let useState;
let useEffect;
let startTransition;

describe('ReactFlushSync', () => {
beforeEach(() => {
Expand All @@ -13,6 +14,7 @@ describe('ReactFlushSync', () => {
Scheduler = require('scheduler');
useState = React.useState;
useEffect = React.useEffect;
startTransition = React.unstable_startTransition;
});

function Text({text}) {
Expand Down Expand Up @@ -62,6 +64,47 @@ describe('ReactFlushSync', () => {
expect(root).toMatchRenderedOutput('1, 1');
});

// @gate experimental
test('nested with startTransition', async () => {
let setSyncState;
let setState;
function App() {
const [syncState, _setSyncState] = useState(0);
const [state, _setState] = useState(0);
setSyncState = _setSyncState;
setState = _setState;
return <Text text={`${syncState}, ${state}`} />;
}

const root = ReactNoop.createRoot();
await ReactNoop.act(async () => {
root.render(<App />);
});
expect(Scheduler).toHaveYielded(['0, 0']);
expect(root).toMatchRenderedOutput('0, 0');

await ReactNoop.act(async () => {
ReactNoop.flushSync(() => {
startTransition(() => {
// This should be async even though flushSync is on the stack, because
// startTransition is closer.
setState(1);
ReactNoop.flushSync(() => {
// This should be async even though startTransition is on the stack,
// because flushSync is closer.
setSyncState(1);
});
});
});
// Only the sync update should have flushed
expect(Scheduler).toHaveYielded(['1, 0']);
expect(root).toMatchRenderedOutput('1, 0');
});
// Now the async update has flushed, too.
expect(Scheduler).toHaveYielded(['1, 1']);
expect(root).toMatchRenderedOutput('1, 1');
});

test('flushes passive effects synchronously when they are the result of a sync render', async () => {
function App() {
useEffect(() => {
Expand Down

0 comments on commit aea7c2a

Please sign in to comment.