We are migrating our web application from React to SolidJS. We want to make the change gradually by converting pages one at a time.
I have been using astro to run both react and solidjs.
The problem I encountered was navigating between react pages and solidjs pages, as they use different routers (react-router-dom and solid/router).
How can I navigate between these two UI libraries?
React uses virtual DOM and re-renders whole DOM tree with each state update. To reduce the work, it diffs and batches previously rendered branches.
Solid renders components into actual DOM elements and there is diffing or batching but some built-in methods/components keep object references to reduce re-calculations if related state branch is unchanged, i.e mapArray, indexArray, For and Index. It is closer to caching than diffing and batching.
So, mixing and matching at component level will be hard to reason about and certainly will be sub-optimal in terms of performance. I believe the best option is to split the work at the root level and migrate each root level components as a whole.
To make it more concrete, lets say you have three paths in your router:
So, you will have three root level components:
Migrating each of them one by one will be cleaner and more performant.
However, if your application is complicated or hard to split at root level or if you don't want to maintain multiple routers, then use Solid-js for rendering the root level components, because those will be actual DOM elements, and mount the React components carrying the old logic on top of them. So you will have have multiple ReactDOM.render calls mounting legacy components on the DOM elements initially rendered by solid-router. I think that will be the best course of action.
