State update bug in concurrent mode (#14698)

* State update bug in concurrent mode

* Fix bug introduced by double-rendering Functions using hooks

Author: bvaughn

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

@@ -0,0 +1,103 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * 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;
+
+describe('ReactDOMSuspensePlaceholder', () => {
+  let container;
+
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  it('should not bail out when an update is scheduled from within an event handler', () => {
+    const {createRef, useCallback, useState} = React;
+
+    const Example = ({inputRef, labelRef}) => {
+      const [text, setText] = useState('');
+      const handleInput = useCallback(event => {
+        setText(event.target.value);
+      });
+
+      return (
+        <React.Fragment>
+          <input ref={inputRef} onInput={handleInput} />
+          <label ref={labelRef}>{text}</label>
+        </React.Fragment>
+      );
+    };
+
+    const inputRef = createRef();
+    const labelRef = createRef();
+
+    ReactDOM.render(
+      <Example inputRef={inputRef} labelRef={labelRef} />,
+      container,
+    );
+
+    inputRef.current.value = 'abc';
+    inputRef.current.dispatchEvent(
+      new Event('input', {bubbles: true, cancelable: true}),
+    );
+
+    expect(labelRef.current.innerHTML).toBe('abc');
+  });
+
+  it('should not bail out when an update is scheduled from within an event handler in ConcurrentMode', () => {
+    const {createRef, useCallback, useState} = React;
+
+    const Example = ({inputRef, labelRef}) => {
+      const [text, setText] = useState('');
+      const handleInput = useCallback(event => {
+        setText(event.target.value);
+      });
+
+      return (
+        <React.Fragment>
+          <input ref={inputRef} onInput={handleInput} />
+          <label ref={labelRef}>{text}</label>
+        </React.Fragment>
+      );
+    };
+
+    const inputRef = createRef();
+    const labelRef = createRef();
+
+    const root = ReactDOM.unstable_createRoot(container);
+    root.render(
+      <React.unstable_ConcurrentMode>
+        <Example inputRef={inputRef} labelRef={labelRef} />
+      </React.unstable_ConcurrentMode>,
+    );
+
+    jest.runAllTimers();
+
+    inputRef.current.value = 'abc';
+    inputRef.current.dispatchEvent(
+      new Event('input', {bubbles: true, cancelable: true}),
+    );
+
+    jest.runAllTimers();
+
+    expect(labelRef.current.innerHTML).toBe('abc');
+  });
+});

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -257,7 +257,7 @@ function updateForwardRef(
     ) {
       // Only double-render components with Hooks
       if (workInProgress.memoizedState !== null) {
-        renderWithHooks(
+        nextChildren = renderWithHooks(
           current,
           workInProgress,
           render,
@@ -567,7 +567,7 @@ function updateFunctionComponent(
     ) {
       // Only double-render components with Hooks
       if (workInProgress.memoizedState !== null) {
-        renderWithHooks(
+        nextChildren = renderWithHooks(
           current,
           workInProgress,
           Component,
@@ -1252,7 +1252,7 @@ function mountIndeterminateComponent(
       ) {
         // Only double-render components with Hooks
         if (workInProgress.memoizedState !== null) {
-          renderWithHooks(
+          value = renderWithHooks(
             null,
             workInProgress,
             Component,