Fix ignored sync work in passive effects

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

@@ -12,7 +12,7 @@
 let React;
 let ReactDOM;
 
-describe('ReactDOMSuspensePlaceholder', () => {
+describe('ReactDOMHooks', () => {
  let container;
 
  beforeEach(() => {
@@ -29,6 +29,47 @@ describe('ReactDOMSuspensePlaceholder', () => {
  document.body.removeChild(container);
  });
 
+ it('can ReactDOM.render() from useEffect', () => {
+ let container2 = document.createElement('div');
+ let container3 = document.createElement('div');
+
+ function Example1({n}) {
+ React.useEffect(() => {
+ ReactDOM.render(<Example2 n={n} />, container2);
+ });
+ return 1 * n;
+ }
+
+ function Example2({n}) {
+ React.useEffect(() => {
+ ReactDOM.render(<Example3 n={n} />, container3);
+ });
+ return 2 * n;
+ }
+
+ function Example3({n}) {
+ return 3 * n;
+ }
+
+ ReactDOM.render(<Example1 n={1} />, container);
+ expect(container.textContent).toBe('1');
+ expect(container2.textContent).toBe('');
+ expect(container3.textContent).toBe('');
+ jest.runAllTimers();
+ expect(container.textContent).toBe('1');
+ expect(container2.textContent).toBe('2');
+ expect(container3.textContent).toBe('3');
+
+ ReactDOM.render(<Example1 n={2} />, container);
+ expect(container.textContent).toBe('2');
+ expect(container2.textContent).toBe('2'); // Not flushed yet
+ expect(container3.textContent).toBe('3'); // Not flushed yet
+ jest.runAllTimers();
+ expect(container.textContent).toBe('2');
+ expect(container2.textContent).toBe('4');
+ expect(container3.textContent).toBe('6');
+ });
+
  it('should not bail out when an update is scheduled from within an event handler', () => {
  const {createRef, useCallback, useState} = React;
 

packages/react-reconciler/src/ReactFiberScheduler.js

@@ -572,6 +572,10 @@ function commitPassiveEffects(root: FiberRoot, firstEffect: Fiber): void {
  if (rootExpirationTime !== NoWork) {
  requestWork(root, rootExpirationTime);
  }
+ // Flush any sync work that was scheduled by effects
+ if (!isRendering) {
+ performSyncWork();
+ }
 }
 
 function isAlreadyFailedLegacyErrorBoundary(instance: mixed): boolean {