Skip to content

Commit 597e8ec

Browse files
committed
Fix ignored sync work in passive effects
1 parent aa94237 commit 597e8ec

File tree

2 files changed

+46
-1
lines changed

2 files changed

+46
-1
lines changed

packages/react-dom/src/__tests__/ReactDOMHooks-test.js

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
let React;
1313
let ReactDOM;
1414

15-
describe('ReactDOMSuspensePlaceholder', () => {
15+
describe('ReactDOMHooks', () => {
1616
let container;
1717

1818
beforeEach(() => {
@@ -29,6 +29,47 @@ describe('ReactDOMSuspensePlaceholder', () => {
2929
document.body.removeChild(container);
3030
});
3131

32+
it('can ReactDOM.render() from useEffect', () => {
33+
let container2 = document.createElement('div');
34+
let container3 = document.createElement('div');
35+
36+
function Example1({n}) {
37+
React.useEffect(() => {
38+
ReactDOM.render(<Example2 n={n} />, container2);
39+
});
40+
return 1 * n;
41+
}
42+
43+
function Example2({n}) {
44+
React.useEffect(() => {
45+
ReactDOM.render(<Example3 n={n} />, container3);
46+
});
47+
return 2 * n;
48+
}
49+
50+
function Example3({n}) {
51+
return 3 * n;
52+
}
53+
54+
ReactDOM.render(<Example1 n={1} />, container);
55+
expect(container.textContent).toBe('1');
56+
expect(container2.textContent).toBe('');
57+
expect(container3.textContent).toBe('');
58+
jest.runAllTimers();
59+
expect(container.textContent).toBe('1');
60+
expect(container2.textContent).toBe('2');
61+
expect(container3.textContent).toBe('3');
62+
63+
ReactDOM.render(<Example1 n={2} />, container);
64+
expect(container.textContent).toBe('2');
65+
expect(container2.textContent).toBe('2'); // Not flushed yet
66+
expect(container3.textContent).toBe('3'); // Not flushed yet
67+
jest.runAllTimers();
68+
expect(container.textContent).toBe('2');
69+
expect(container2.textContent).toBe('4');
70+
expect(container3.textContent).toBe('6');
71+
});
72+
3273
it('should not bail out when an update is scheduled from within an event handler', () => {
3374
const {createRef, useCallback, useState} = React;
3475

packages/react-reconciler/src/ReactFiberScheduler.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -572,6 +572,10 @@ function commitPassiveEffects(root: FiberRoot, firstEffect: Fiber): void {
572572
if (rootExpirationTime !== NoWork) {
573573
requestWork(root, rootExpirationTime);
574574
}
575+
// Flush any sync work that was scheduled by effects
576+
if (!isRendering) {
577+
performSyncWork();
578+
}
575579
}
576580

577581
function isAlreadyFailedLegacyErrorBoundary(instance: mixed): boolean {

0 commit comments

Comments
 (0)