Initialize update queue object on mount (#17560)

* Refactor Update Queues to Fix Rebasing Bug
Fixes a bug related to rebasing updates. Once an update has committed,
it should never un-commit, even if interrupted by a higher priority
update. The fix includes a refactor of how update queues work.
This commit is a combination of two PRs:
- #17483 by @sebmarkbage refactors the hook update queue
- #17510 by @acdlite refactors the class and root update queue
Landing one without the other would cause state updates to sometimes be
inconsistent across components, so I've combined them into a single
commit in case they need to be reverted.
Co-authored-by: Sebastian Markbåge <sema@fb.com>
Co-authored-by: Andrew Clark <git@andrewclark.io>
* Initialize update queue object on mount
Instead of lazily initializing update queue objects on the first update,
class and host root queues are created on mount. This simplifies the
logic for appending new updates and matches what we do for hooks.

Author: acdlite

packages/react-noop-renderer/src/createReactNoop.js

@@ -1142,20 +1142,33 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
 
 functionlogUpdateQueue(updateQueue: UpdateQueue<mixed>,depth){
 log(' '.repeat(depth+1)+'QUEUED UPDATES');
-constfirstUpdate=updateQueue.firstUpdate;
-if(!firstUpdate){
+constlast=updateQueue.baseQueue;
+if(last===null){
 return;
 }
+constfirst=last.next;
+letupdate=first;
+if(update!==null){
+do{
+log(
+' '.repeat(depth+1)+'~',
+'['+update.expirationTime+']',
+);
+}while(update!==null&&update!==first);
+}
 
-log(
-' '.repeat(depth+1)+'~',
-'['+firstUpdate.expirationTime+']',
-);
-while(firstUpdate.next){
-log(
-' '.repeat(depth+1)+'~',
-'['+firstUpdate.expirationTime+']',
-);
+constlastPending=updateQueue.shared.pending;
+if(lastPending!==null){
+constfirstPending=lastPending.next;
+letpendingUpdate=firstPending;
+if(pendingUpdate!==null){
+do{
+log(
+' '.repeat(depth+1)+'~',
+'['+pendingUpdate.expirationTime+']',
+);
+}while(pendingUpdate!==null&&pendingUpdate!==firstPending);
+}
 }
 }
 

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -90,7 +90,11 @@ import {
 reconcileChildFibers,
 cloneChildFibers,
 }from'./ReactChildFiber';
-import{processUpdateQueue}from'./ReactUpdateQueue';
+import{
+processUpdateQueue,
+cloneUpdateQueue,
+initializeUpdateQueue,
+}from'./ReactUpdateQueue';
 import{
 NoWork,
 Never,
@@ -904,21 +908,16 @@ function updateHostRoot(current, workInProgress, renderExpirationTime) {
 pushHostRootContext(workInProgress);
 constupdateQueue=workInProgress.updateQueue;
 invariant(
-updateQueue!==null,
+current!==null&&updateQueue!==null,
 'If the root does not have an updateQueue, we should have already '+
 'bailed out. This error is likely caused by a bug in React. Please '+
 'file an issue.',
 );
 constnextProps=workInProgress.pendingProps;
 constprevState=workInProgress.memoizedState;
 constprevChildren=prevState!==null ? prevState.element : null;
-processUpdateQueue(
-workInProgress,
-updateQueue,
-nextProps,
-null,
-renderExpirationTime,
-);
+cloneUpdateQueue(current,workInProgress);
+processUpdateQueue(workInProgress,nextProps,null,renderExpirationTime);
 constnextState=workInProgress.memoizedState;
 // Caution: React DevTools currently depends on this property
 // being called "element".
@@ -1338,6 +1337,8 @@ function mountIndeterminateComponent(
 workInProgress.memoizedState=
 value.state!==null&&value.state!==undefined ? value.state : null;
 
+initializeUpdateQueue(workInProgress);
+
 constgetDerivedStateFromProps=Component.getDerivedStateFromProps;
 if(typeofgetDerivedStateFromProps==='function'){
 applyDerivedStateFromProps(

packages/react-reconciler/src/ReactFiberClassComponent.js

@@ -9,6 +9,7 @@
 
 importtype{Fiber}from'./ReactFiber';
 importtype{ExpirationTime}from'./ReactFiberExpirationTime';
+importtype{UpdateQueue}from'./ReactUpdateQueue';
 
 importReactfrom'react';
 import{Update,Snapshot}from'shared/ReactSideEffectTags';
@@ -38,6 +39,8 @@ import {
 createUpdate,
 ReplaceState,
 ForceUpdate,
+initializeUpdateQueue,
+cloneUpdateQueue,
 }from'./ReactUpdateQueue';
 import{NoWork}from'./ReactFiberExpirationTime';
 import{
@@ -171,8 +174,9 @@ export function applyDerivedStateFromProps(
 
 // Once the update queue is empty, persist the derived state onto the
 // base state.
-constupdateQueue=workInProgress.updateQueue;
-if(updateQueue!==null&&workInProgress.expirationTime===NoWork){
+if(workInProgress.expirationTime===NoWork){
+// Queue is always non-null for classes
+constupdateQueue: UpdateQueue<any> = (workInProgress.updateQueue: any);
  updateQueue.baseState = memoizedState;
 }
 }
@@ -789,6 +793,8 @@ function mountClassInstance(
 instance.state=workInProgress.memoizedState;
 instance.refs=emptyRefsObject;
 
+initializeUpdateQueue(workInProgress);
+
 constcontextType=ctor.contextType;
 if(typeofcontextType==='object'&&contextType!==null){
 instance.context=readContext(contextType);
@@ -829,17 +835,8 @@ function mountClassInstance(
 }
 }
 
-letupdateQueue=workInProgress.updateQueue;
-if(updateQueue!==null){
-processUpdateQueue(
-workInProgress,
-updateQueue,
-newProps,
-instance,
-renderExpirationTime,
-);
-instance.state=workInProgress.memoizedState;
-}
+processUpdateQueue(workInProgress,newProps,instance,renderExpirationTime);
+instance.state=workInProgress.memoizedState;
 
 constgetDerivedStateFromProps=ctor.getDerivedStateFromProps;
 if(typeofgetDerivedStateFromProps==='function'){
@@ -863,17 +860,13 @@ function mountClassInstance(
 callComponentWillMount(workInProgress,instance);
 // If we had additional state updates during this life-cycle, let's
 // process them now.
-updateQueue=workInProgress.updateQueue;
-if(updateQueue!==null){
-processUpdateQueue(
-workInProgress,
-updateQueue,
-newProps,
-instance,
-renderExpirationTime,
-);
-instance.state=workInProgress.memoizedState;
-}
+processUpdateQueue(
+workInProgress,
+newProps,
+instance,
+renderExpirationTime,
+);
+instance.state=workInProgress.memoizedState;
 }
 
 if(typeofinstance.componentDidMount==='function'){
@@ -936,17 +929,8 @@ function resumeMountClassInstance(
 
 constoldState=workInProgress.memoizedState;
 letnewState=(instance.state=oldState);
-letupdateQueue=workInProgress.updateQueue;
-if(updateQueue!==null){
-processUpdateQueue(
-workInProgress,
-updateQueue,
-newProps,
-instance,
-renderExpirationTime,
-);
-newState=workInProgress.memoizedState;
-}
+processUpdateQueue(workInProgress,newProps,instance,renderExpirationTime);
+newState=workInProgress.memoizedState;
 if(
 oldProps===newProps&&
 oldState===newState&&
@@ -1035,6 +1019,8 @@ function updateClassInstance(
 ): boolean{
 constinstance=workInProgress.stateNode;
 
+cloneUpdateQueue(current,workInProgress);
+
 constoldProps=workInProgress.memoizedProps;
 instance.props=
 workInProgress.type===workInProgress.elementType
@@ -1081,17 +1067,8 @@ function updateClassInstance(
 
 constoldState=workInProgress.memoizedState;
 letnewState=(instance.state=oldState);
-letupdateQueue=workInProgress.updateQueue;
-if(updateQueue!==null){
-processUpdateQueue(
-workInProgress,
-updateQueue,
-newProps,
-instance,
-renderExpirationTime,
-);
-newState=workInProgress.memoizedState;
-}
+processUpdateQueue(workInProgress,newProps,instance,renderExpirationTime);
+newState=workInProgress.memoizedState;
 
 if(
 oldProps===newProps&&