fix: rendered more hooks issue

Author: himself65

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

@@ -656,4 +656,135 @@ describe('ReactDOMFizzShellHydration', () => {
       expect(container.innerHTML).toBe('Client');
     },
   );
+
+  it('handles conditional use with a cascading update and error boundaries', async () => {
+    class ErrorBoundary extends React.Component {
+      constructor(props) {
+        super(props);
+        this.state = {error: null};
+      }
+
+      static getDerivedStateFromError(error) {
+        return {error};
+      }
+
+      componentDidCatch() {}
+
+      render() {
+        if (this.state.error) {
+          return 'Something went wrong: ' + this.state.error.message;
+        }
+
+        return this.props.children;
+      }
+    }
+
+    function Bomb() {
+      throw new Error('boom');
+    }
+
+    function Updater({setPromise}) {
+      const [state, setState] = React.useState(false);
+
+      React.useEffect(() => {
+        // deleting this set state removes too many hooks error
+        setState(true);
+        // deleting this startTransition removes too many hooks error
+        startTransition(() => {
+          setPromise(Promise.resolve('resolved'));
+        });
+      }, [state]);
+
+      return null;
+    }
+
+    const Context = React.createContext(null);
+
+    function Page() {
+      const [promise, setPromise] = React.useState(null);
+      Scheduler.log('use: ' + promise);
+      /**
+       * this part is tricky, I cannot say confidently the conditional `use` is required for the reproduction.
+       * If we tried to run use(promise ?? cachedPromise) we wouldn't be able renderToString without a parent suspense boundary
+       * but with a parent suspense the bug is no longer reproducible (with or without conditional use)
+       * and without renderToString + hydration, the bug is no longer reproducible
+       */
+      const value = promise ? React.use(promise) : promise;
+      Scheduler.log('used: ' + value);
+
+      React.useMemo(() => {}, []);
+      React.useCallback(() => {}, []);
+      React.useEffect(() => {}, []);
+      React.useLayoutEffect(() => {}, []);
+      React.useRef(null);
+      React.useImperativeHandle(null, () => {});
+      React.useDebugValue(null);
+      React.useContext(Context);
+      const [state] = React.useState();
+      React.useDeferredValue(state);
+      React.useOptimistic(state, () => {});
+      React.useTransition();
+      React.useSyncExternalStore(
+        () => () => {},
+        () => null,
+        () => null,
+      );
+      return (
+        <>
+          <Updater setPromise={setPromise} />
+          <React.Suspense fallback="Loading...">
+            <ErrorBoundary>
+              <Bomb />
+            </ErrorBoundary>
+          </React.Suspense>
+          hello world
+        </>
+      );
+    }
+    function App() {
+      return <Page />;
+    }
+
+    // Server render
+    await serverAct(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />, {
+        onError(error) {
+          Scheduler.log('onError: ' + error.message);
+        },
+      });
+      pipe(writable);
+    });
+    assertLog(['use: null', 'used: null', 'onError: boom']);
+
+    expect(container.textContent).toBe('Loading...hello world');
+
+    await clientAct(async () => {
+      ReactDOMClient.hydrateRoot(container, <App />, {
+        onCaughtError(error) {
+          Scheduler.log('onCaughtError: ' + error.message);
+        },
+        onUncaughtError(error) {
+          Scheduler.log('onUncaughtError: ' + error.message);
+        },
+        onRecoverableError(error) {
+          Scheduler.log('onRecoverableError: ' + error.message);
+          if (error.cause) {
+            Scheduler.log('Cause: ' + error.cause.message);
+          }
+        },
+      });
+    });
+    assertLog([
+      'use: null',
+      'used: null',
+      'use: [object Promise]',
+      'onCaughtError: boom',
+      'use: [object Promise]',
+      'use: [object Promise]',
+      'used: resolved',
+    ]);
+
+    // Should've rendered something. The error was handled by the error boundary.
+    expect(container.textContent).toBe('Something went wrong: boomhello world');
+  });
 });

packages/react-reconciler/src/ReactFiberHooks.js

@@ -281,6 +281,9 @@ let localIdCounter: number = 0;
 let thenableIndexCounter: number = 0;
 let thenableState: ThenableState | null = null;
 
+// Track whether we've switched dispatchers due to conditional use
+let hasDispatcherSwitchedDueToUse: boolean = false;
+
 // Used for ids that are generated completely client-side (i.e. not during
 // hydration). This counter is global, so client ids are not stable across
 // render attempts.
@@ -624,6 +627,9 @@ export function renderWithHooks<Props, SecondArg>(
 
   finishRenderingHooks(current, workInProgress, Component);
 
+  // Reset dispatcher switch flag for the next render
+  hasDispatcherSwitchedDueToUse = false;
+
   return children;
 }
 
@@ -931,6 +937,9 @@ export function resetHooksAfterThrow(): void {
   // We can assume the previous dispatcher is always this one, since we set it
   // at the beginning of the render phase and there's no re-entrance.
   ReactSharedInternals.H = ContextOnlyDispatcher;
+
+  // Reset dispatcher switch flag
+  hasDispatcherSwitchedDueToUse = false;
 }
 
 export function resetHooksOnUnwind(workInProgress: Fiber): void {
@@ -1037,6 +1046,32 @@ function updateWorkInProgressHook(): Hook {
           'Update hook called on initial render. This is likely a bug in React. Please file an issue.',
         );
       } else {
+        // Check if we're in a conditional use scenario
+        if (hasDispatcherSwitchedDueToUse) {
+          // We're in a situation where conditional use has caused hook count mismatch.
+          // Create a new hook and mark that we should treat the next hook as a mount.
+          const newHook: Hook = {
+            memoizedState: null,
+            baseState: null,
+            baseQueue: null,
+            queue: null,
+            next: null,
+          };
+
+          if (workInProgressHook === null) {
+            // This is the first hook in the list.
+            currentlyRenderingFiber.memoizedState = workInProgressHook =
+              newHook;
+          } else {
+            // Append to the end of the list.
+            workInProgressHook = workInProgressHook.next = newHook;
+          }
+
+          // Don't throw error - let the hook continue
+          // The specific hook implementation will handle initialization
+          return workInProgressHook;
+        }
+
         // This is an update. We should always have a current hook.
         throw new Error('Rendered more hooks than during the previous render.');
       }
@@ -1130,11 +1165,15 @@ function useThenable<T>(thenable: Thenable<T>): T {
     const currentFiber = workInProgressFiber.alternate;
     if (__DEV__) {
       if (currentFiber !== null && currentFiber.memoizedState !== null) {
+        hasDispatcherSwitchedDueToUse = true;
         ReactSharedInternals.H = HooksDispatcherOnUpdateInDEV;
       } else {
         ReactSharedInternals.H = HooksDispatcherOnMountInDEV;
       }
     } else {
+      if (currentFiber !== null && currentFiber.memoizedState !== null) {
+        hasDispatcherSwitchedDueToUse = true;
+      }
       ReactSharedInternals.H =
         currentFiber === null || currentFiber.memoizedState === null
           ? HooksDispatcherOnMount
@@ -1304,10 +1343,20 @@ function updateReducerImpl<S, A>(
   const queue = hook.queue;
 
   if (queue === null) {
-    throw new Error(
-      'Should have a queue. You are likely calling Hooks conditionally, ' +
-        'which is not allowed. (https://react.dev/link/invalid-hook-call)',
-    );
+    // Check if this is a conditional use scenario
+    if (handleConditionalUseInit(hook)) {
+      // For conditional use, delegate to mount behavior with default initial value
+      const initialState =
+        reducer === basicStateReducer ? false : ((undefined: any): S);
+      return callWithConditionalUseFlag(() =>
+        mountReducer(reducer, initialState, undefined),
+      );
+    } else {
+      throw new Error(
+        'Should have a queue. You are likely calling Hooks conditionally, ' +
+          'which is not allowed. (https://react.dev/link/invalid-hook-call)',
+      );
+    }
   }
 
   queue.lastRenderedReducer = reducer;
@@ -1761,6 +1810,14 @@ function updateSyncExternalStore<T>(
   }
   const inst = hook.queue;
 
+  // Handle conditional use scenario where hook was newly created
+  if (handleConditionalUseInit(hook) && inst === null) {
+    // Delegate to mount behavior
+    return callWithConditionalUseFlag(() =>
+      mountSyncExternalStore(subscribe, getSnapshot, getServerSnapshot),
+    );
+  }
+
   updateEffect(subscribeToStore.bind(null, fiber, inst, subscribe), [
     subscribe,
   ]);
@@ -2633,6 +2690,15 @@ function updateEffectImpl(
 ): void {
   const hook = updateWorkInProgressHook();
   const nextDeps = deps === undefined ? null : deps;
+
+  // Handle conditional use scenario where hook was newly created
+  if (handleConditionalUseInit(hook)) {
+    // Delegate to mount behavior
+    return callWithConditionalUseFlag(() =>
+      mountEffectImpl(fiberFlags, hookFlags, create, deps),
+    );
+  }
+
   const effect: Effect = hook.memoizedState;
   const inst = effect.inst;
 
@@ -2900,6 +2966,13 @@ function updateCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
   const hook = updateWorkInProgressHook();
   const nextDeps = deps === undefined ? null : deps;
   const prevState = hook.memoizedState;
+
+  // Handle conditional use scenario where hook was newly created
+  if (handleConditionalUseInit(hook)) {
+    // Delegate to mount behavior
+    return callWithConditionalUseFlag(() => mountCallback(callback, deps));
+  }
+
   if (nextDeps !== null) {
     const prevDeps: Array<mixed> | null = prevState[1];
     if (areHookInputsEqual(nextDeps, prevDeps)) {
@@ -2929,13 +3002,36 @@ function mountMemo<T>(
   return nextValue;
 }
 
+// Helper function to handle conditional use initialization
+function handleConditionalUseInit(hook: Hook): boolean {
+  return hasDispatcherSwitchedDueToUse && hook.memoizedState === null;
+}
+
+// Wrapper to safely call mount functions during conditional use
+function callWithConditionalUseFlag<T>(fn: () => T): T {
+  const prevFlag = hasDispatcherSwitchedDueToUse;
+  hasDispatcherSwitchedDueToUse = false;
+  try {
+    return fn();
+  } finally {
+    hasDispatcherSwitchedDueToUse = prevFlag;
+  }
+}
+
 function updateMemo<T>(
   nextCreate: () => T,
   deps: Array<mixed> | void | null,
 ): T {
   const hook = updateWorkInProgressHook();
   const nextDeps = deps === undefined ? null : deps;
   const prevState = hook.memoizedState;
+
+  // Handle conditional use scenario where hook was newly created
+  if (handleConditionalUseInit(hook)) {
+    // Delegate to mount behavior
+    return callWithConditionalUseFlag(() => mountMemo(nextCreate, deps));
+  }
+
   // Assume these are defined. If they're not, areHookInputsEqual will warn.
   if (nextDeps !== null) {
     const prevDeps: Array<mixed> | null = prevState[1];
@@ -3401,6 +3497,27 @@ function updateTransition(): [
   const [booleanOrThenable] = updateState(false);
   const hook = updateWorkInProgressHook();
   const start = hook.memoizedState;
+
+  // Handle conditional use scenario
+  if (handleConditionalUseInit(hook)) {
+    // Delegate to mount behavior
+    return callWithConditionalUseFlag(() => mountTransition());
+  }
+
+  // Check if start is null for other error conditions
+  if (start === null) {
+    const stateHook = currentlyRenderingFiber.memoizedState;
+    const startFn = startTransition.bind(
+      null,
+      currentlyRenderingFiber,
+      stateHook.queue,
+      true,
+      false,
+    );
+    hook.memoizedState = startFn;
+    return [false, startFn];
+  }
+
   const isPending =
     typeof booleanOrThenable === 'boolean'
       ? booleanOrThenable