From 88968e26e285a704b8596d691a31b47ae8771d9b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 13 Jul 2021 22:13:28 -0400
Subject: [PATCH] Added failing test case

---
 .../ReactSuspenseEffectsSemanticsDOM-test.js  | 74 +++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemanticsDOM-test.js

diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemanticsDOM-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemanticsDOM-test.js
new file mode 100644
index 0000000000000..8ed56bd5f2d96
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemanticsDOM-test.js
@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+let React;
+let ReactDOM;
+let act;
+
+describe('ReactSuspenseEffectsSemanticsDOM', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    act = require('jest-react').act;
+  });
+
+  it('should not cause a cycle when combined with a render phase update', () => {
+    let scheduleSuspendingUpdate;
+
+    function App() {
+      const [value, setValue] = React.useState(true);
+
+      scheduleSuspendingUpdate = () => setValue(!value);
+
+      return (
+        <>
+          <React.Suspense fallback="Loading...">
+            <ComponentThatCausesBug value={value} />
+            <ComponentThatSuspendsOnUpdate shouldSuspend={!value} />
+          </React.Suspense>
+        </>
+      );
+    }
+
+    function ComponentThatCausesBug({value}) {
+      const [mirroredValue, setMirroredValue] = React.useState(value);
+      if (mirroredValue !== value) {
+        setMirroredValue(value);
+      }
+
+      // eslint-disable-next-line no-unused-vars
+      const [_, setRef] = React.useState(null);
+
+      return <div ref={setRef} />;
+    }
+
+    const promise = Promise.resolve();
+
+    function ComponentThatSuspendsOnUpdate({shouldSuspend}) {
+      if (shouldSuspend) {
+        // Fake Suspend
+        throw promise;
+      }
+      return null;
+    }
+
+    act(() => {
+      const root = ReactDOM.createRoot(document.createElement('div'));
+      root.render(<App />);
+    });
+
+    act(() => {
+      scheduleSuspendingUpdate();
+    });
+  });
+});