How to embed react in solidjs.

[chadsteele]

I want to use platejs and can't find anything remotely comparable in the solidjs/vanilla ecosystem. Educate me.

Until then, I thought I could embed a react component easily in my solidjs project. I'm wrong. Here's my approach that fails.

Has anyone done this already? @ryansolid ???

import {Component, onMount} from "solid-js"
import {createRoot} from "react-dom/client"
import React, {createElement, ReactNode} from "react"

function Profile() {
	return (
		<img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
	)
}

export default function (props) {
	let reactRoot: HTMLDivElement | null = null

	onMount(() => {
		const root = createRoot(reactRoot)
		root.render(createElement(<Profile/>, null))
	})

	return (
		<div>
			<h1>SolidJS Component</h1>
			<div ref={reactRoot}></div>
		</div>
	)
}

[ryansolid]

I have to admit I haven't worked much on this direction recently. Originally I made this demo: https://codesandbox.io/p/sandbox/solid-react-hoc-8m2yd?file=%2Fsolid-react.jsx.

But more of the focus and work has been the other way of putting Solid in existing React apps: https://stackblitz.com/edit/hr-meheraj-vite-react-rr54iq?file=src%2FApp.jsx

This is mostly because while people have no choice to deal with existing React projects and we need to make it easier to use Solid, the other direction generally isn't as beneficial. If you are already using Solid, using React will generally be a negative. We have most ecosystem libraries we need.

[chadsteele]

I'll give this a shot. Thank you for the fast response!

[chadsteele]

The React ecosystem is the #1 reason people are slow to convert to Solidjs in my experience. If we can make it easy to consume large open source react components, I believe it would remove that barrier

…

On Thu, Mar 13, 2025 at 7:56 PM Ryan Carniato ***@***.***> wrote: I have to admit I haven't worked much on this direction recently. Originally I made this demo: https://codesandbox.io/p/sandbox/solid-react-hoc-8m2yd?file=%2Fsolid-react.jsx . But more of the focus and work has been the other way of putting Solid in existing React apps: https://stackblitz.com/edit/hr-meheraj-vite-react-rr54iq?file=src%2FApp.jsx This is mostly because while people have no choice to deal with existing React projects and we need to make it easier to use Solid, the other direction generally isn't as beneficial. If you are already using Solid, using React will generally be a negative. We have most ecosystem libraries we need. — Reply to this email directly, view it on GitHub <#2445 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACM3OSKVYPKAPSA5A2X5EL2UGTBLAVCNFSM6AAAAABY5WA7Z2VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTENBZGA2TANI> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[ryansolid]

While it is a considerable part of it. There are libraries like Preact and Inferno that ship React Compat and while that has helped them gain adoption initially, long term it hasn't helped grow their ecosystem. In our case, React works very differently, so while large touch points (like a code editor) could make sense to integrate, doing it granularly at a per component level is not particularly beneficial as the overhead basically negates the benefit of using Solid.

The ecosystem is definitely a barrier but I think the community in general like hiring, marketing, education/training are much bigger blockers. While the reality is that most things are made for React first, we've been intent on making ourselves second (as you can see with things like Tanstack). It isn't a position I would have taken a few years ago intentionally, now that we have at least a pretty solid base of libraries in our ecosystem I don't believe that not finding a solution is so much a problem anymore.

[chadsteele]

I appreciate your time and expertise. I will not pretend I am more aware of it, the issues, barriers, etc. than you. I will say you're a genius and I am so grateful for solidjs. It's literally fun to work with... and I cannot say that about any js tech ever, not even jquery, which was a huge bandaid at the time, but ultimately added complexity... solidjs helps reduce it. I love that and thank you.

[chadsteele]

p.s. svelte is a close second, but too opinionated. thanks again

[chadsteele]

btw, re: "overhead basically negates the benefit of using Solid" ... you may be too close to know, but performance is not the biggest benefit of solidjs. Few sites need the speed. It's simplicity that matters most. It's the speed of development, low complexity, low maintenance, and the joy of coding is by far the greatest benefit in my mind.

[chadsteele]

... and btw, I have since found this vanilla project that seems very promising and does not require react
https://editorjs.io/