Phased dispatcher (#14701)

* Move DEV-only function right above where it's used
I don't like looking at this top-level function #petty
* Use different dispatchers for functions & classes
Classes support readContext, but not any of the other dispatcher
methods. Function support all methods.
This is a more robust version of our previous strategy of checking
whether `currentlyRenderingFiber` is null.
As a next step, we can use a separate dispatcher for each phase of the
render cycle (mount versus update).
* Use separate dispatchers for mount and update
* Remove mount code from update path
Deletes mount-specific code from the update path, since it should be
unreachable. To continue supporting progressive enhancement (mounting
new hooks at the end of the list), we detect when there are no more
current hooks and switch back to the mount dispatcher. Progressive
enhancement isn't officially supported yet, so it will continue to warn.
* Factoring nits
* Fix Flow
Had to cheat more than I would like
* More Flow nits
* Switch back to using a special dispatcher for nested hooks in DEV
In order for this strategy to work, I had to revert progressive
enhancement support (appending hooks to the end). It was previously a
warning but now it results in an error. We'll reconsider later.
* Always pass args to updateState and updateReducer
Even though the extra args are only used on mount, to ensure
type consistency.

Author: acdlite

packages/react-debug-tools/src/ReactDebugHooks.js

@@ -10,7 +10,7 @@
 importtype{ReactContext,ReactProviderType}from'shared/ReactTypes';
 importtype{Fiber}from'react-reconciler/src/ReactFiber';
 importtype{Hook}from'react-reconciler/src/ReactFiberHooks';
-importtypeof{DispatcherasDispatcherType}from'react-reconciler/src/ReactFiberDispatcher';
+importtype{DispatcherasDispatcherType}from'react-reconciler/src/ReactFiberHooks';
 
 importErrorStackParserfrom'error-stack-parser';
 importReactSharedInternalsfrom'shared/ReactSharedInternals';

packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.internal.js

@@ -432,21 +432,25 @@ describe('ReactDOMServerHooks', () => {
 expect(domNode.textContent).toEqual('hi');
 });
 
-itRenders('with a warning for useRef inside useReducer',asyncrender=>{
-functionApp(){
-const[value,dispatch]=useReducer((state,action)=>{
-useRef(0);
-returnstate+1;
-},0);
-if(value===0){
-dispatch();
+itThrowsWhenRendering(
+'with a warning for useRef inside useReducer',
+asyncrender=>{
+functionApp(){
+const[value,dispatch]=useReducer((state,action)=>{
+useRef(0);
+returnstate+1;
+},0);
+if(value===0){
+dispatch();
+}
+returnvalue;
 }
-returnvalue;
-}
 
-constdomNode=awaitrender(<App/>,1);
-expect(domNode.textContent).toEqual('1');
-});
+constdomNode=awaitrender(<App/>,1);
+expect(domNode.textContent).toEqual('1');
+},
+'Rendered more hooks than during the previous render',
+);
 
 itRenders('with a warning for useRef inside useState',asyncrender=>{
 functionApp(){

packages/react-dom/src/server/ReactPartialRendererHooks.js

@@ -7,7 +7,7 @@
  * @flow
  */
 
-importtypeof{DispatcherasDispatcherType}from'react-reconciler/src/ReactFiberDispatcher';
+importtype{DispatcherasDispatcherType}from'react-reconciler/src/ReactFiberHooks';
 importtype{ThreadID}from'./ReactThreadIDAllocator';
 importtype{ReactContext}from'shared/ReactTypes';
 
@@ -113,6 +113,9 @@ function areHookInputsEqual(
 }
 
 functioncreateHook(): Hook{
+if(numberOfReRenders>0){
+invariant(false,'Rendered more hooks than during the previous render');
+}
 return{
 memoizedState: null,
 queue: null,