Recommened approach for gradual adoption within a React app

[Adjective-Object]

Hey all,
I'm exploring embedding dioxus components within an existing large React-based webapp. My first thought was that doing a component-by-component migration to gradually adopt dioxus within the app could be viable.

From some skimming of the existing code, I think my approach would be to modify this IPC class from dioxus-liveview so it wasn't an obligate singleton accessing the global window.interpreter. Call it InstancedIPC

From there, I could create some DioxusComponent in React that creates an instanced interpreter, and renders that component subtree with dioxus as a layoutEffect in React.

My first set of thoughts is:

• I assume having a separate dioxus runtime per-component would be non-performant for a large number of components (e.g. if I migrated MyCustomButton which is used throughout the app).
  • There might be a way to work around this with Portals in dioxus-land, but I can't find any documentation on how to do that. There's a note about reparenting the div from the web side after renderding, but that has the potential to cause an additional style calc and layout re-evaluation after the render, right?
• Is the NativeInterpreter actually safe to have multiple instances of within the same JS runtime?
• Doubling the up-front cost of loading two frameworks is a pretty big deal, runtime-wise. Do the perf benefits of rendering components from within Dioxus tend to be worth it? Especially since global state management would likely continue to live within javascript-land for a long time during the migration, if not forever.

What do y'all think of this approach? I'm assuming I'm missing some footguns here, which is a big part of why I'm opening the thread.