Question: Async React Reconciler

[simonedevit]

Apologies for using the bug template, but I have a question regarding React Reconciler. I understand that this is not intended for questions, and I appreciate your understanding.

I'm building a custom React reconciler by using react-reconciler package. I'm wondering if it is possible having an async reconciler. I need to dynamic import a module in the createInstance method of HostConfig based on the type parameter. A minimal implementation example could be:

// reconciler.ts
async createInstance(type, props, rootContainer, hostContext, internalHandle){
    const Module = await import(`my-module-path/${type}`);
    const instance = new Module();
    return instance;
}

getPublicInstance(instance){
    return instance; // this is a Promise
}

The main issue is that in this way i'm returning a Promise as ref and then i should handle it in this way:

// Component.tsx
  useEffect(() => {
    ref.current.then((instance) => {
      // access here to instance
    })
  }, [ref])

Mine is not a primary renderer so, as workaround, i thought to traversing the Fiber node (generated by React reconciler) to get the all tag names (JSX intrinsic elements) and then dynamic import them before to start the secondary rendering process (createContainer and updateContainer). Unfortunately this not entirely correct because the root Fiber node does not encompass all components of the tree. For example, in the following scenario, only one between the box and the sphere will be included:

condition ? <box /> : <sphere />

Are there other ways to think about this problem?

---

React (react package) version: 18.3.1
React reconciler (react-reconciler package): 0.29.2

[eps1lon]

Can you use React.lazy for that instead?

[simonedevit]

I'm sorry, i can't get it. Starting from here:

// reconciler.ts
async createInstance(type, props, rootContainer, hostContext, internalHandle){
    const Module = await import(`my-module-path/${type}`);
    const instance = new Module();
    return instance;
}

my returned instance isn't a React component but a pure JavaScript object.

[simonedevit]

I can't use React.lazy in my createInstance method because i'm importing JavaScript modules (and not React components). Am i missing something?

I'm wondering if it were possible to throw a promise from the createInstance method of reconciler and then catch it on the React side, leveraging on the power of Suspense. Libraries like react-query and swr already throw a promise, but within their respective hooks that are tied to the component. If it were possible, once the promise is resolved, how could I resume the flow from that point and return the resolved instance?