Bug: Component is not a function when using Suspense and forwardRef

[hansottowirtz]

React version: 18.3.0-next-3ba7add60-20221201

Steps To Reproduce

I haven't been able to create a minimal example yet, if needed I will spend more time on it. However, it only seems to occur when Suspending components rerender in a specific order.

Description

The Component is not a function error is thrown when using Suspense and forwardRef together in a specific way.

It seems like react-reconciler doesn't properly handle forwardRefs in either renderWithHooksAgain, replaySuspendedComponentWithHooks, replayFunctionComponent or replaySuspendedUnitOfWork. The Component variable is not a function in this case, but a { $$typeof: Symbol(react.forward_ref), render: (props, ref) => any }. renderWithHooksAgain tries to execute Component(props, secondArg), which throws this error.

I'm not too familiar with React internals, if you can tell me how to trigger this codepath I can make a minimal reproduction more easily.

[hansottowirtz]

This patch solves it:

--- a/dist/compiled/react-dom/cjs/react-dom.development.js
+++ b/dist/compiled/react-dom/cjs/react-dom.development.js
@@ -30987,7 +30987,16 @@ function replaySuspendedUnitOfWork(unitOfWork) {
         var Component = unitOfWork.type;
         var unresolvedProps = unitOfWork.pendingProps;
         var resolvedProps = unitOfWork.elementType === Component ? unresolvedProps : resolveDefaultProps(Component, unresolvedProps);
-        next = replayFunctionComponent(current, unitOfWork, resolvedProps, Component, workInProgressRootRenderLanes);
+        var componentRender = null;
+        switch (unitOfWork.tag) {
+          case FunctionComponent:
+            componentRender = type;
+            break;
+          case ForwardRef:
+            componentRender = type.render;
+            break;
+        }
+        next = replayFunctionComponent(current, unitOfWork, resolvedProps, componentRender, workInProgressRootRenderLanes);
         break;
       }

A line like this exists in updateForwardRef, but doesn't seem to exist in the replay suspense logic.

react/packages/react-reconciler/src/ReactFiberBeginWork.js

Line 415 in 480aa77

const render = Component.render;

[hansottowirtz]

@acdlite tagging you because I think the reconciler and suspense is your field of expertise. Happy to help with anything that can help solve this.

[acdlite]

Ah yeah that's a good find. Want to submit a PR with a regression test? :)

[hansottowirtz]

Sure! Might need some help on how to trigger the replaySuspendedUnitOfWork function. I'll tag you in the PR.