First of all, what is compared here is the custom renderer, not the web development experience. All the comparison data are measured in specific scenarios. And I am not familiar with solidjs, so it may not be the best practice. If you have a better idea, please feel free to share.

Conclusion

I will still use react due to the following reasons

1. Performance, since the bottleneck is layout and rendering, the improvement brought by the framework is very limited, and the first startup of solidjs is very slow

2. Size, since the third-party polyfill is too large, it is the only advantage of solidjs

3. Ecosystem, using react means that more react ecosystems can be connected in the future, such as rendering it on the web, and using rust packaging tools, etc.

The test case is to use mujs to render a 10x10 grid of different colors in the mpv player, so we need to add a lot of polyfills and bundle to es5 format, and mujs does not support Proxy, which is why we choose solidjs instead of Vue(although solidjs also needs to use Proxy in some cases)

performance

Since we use the same code for layout and rendering, the performance is only related to the framework itself, and there is almost no difference between the two.

Strangely, solidjs takes longer to start up than react. I guess it’s because it needs to build dependencies and has too many array operations.

[mpv_easy_es5] render time(react): max: 568 avg: 4.0625

[mpv_easy_es5] render time(solid): max: 729 avg: 4.28125

Toolchain

Most toolchains support react-reconciler, because it is a normal js library.

However, solidjs requires global module replacement and template compilation, and currently only supports babel and vite.

React also retains the ability to use the react ecosystem. For testing convenience, when we need to render components to the browser, we can use the react ecosystem, and in the future we can use tools such as swc

Problems with reactivity

When rendering, we need to get a certain attribute of the virtual DOM. Compared with react, we need to additionally determine whether the attribute is a signal

const text = typeof dom.attrs.text === 'function' ? dom.attrs.text : dom.attrs.text

But how to distinguish event function? You can only add a prefix, because you can't distinguish between getter and event function

DOM attributes can be T or Getter<T>, which needs to be processed not only in layout and rendering, but also in Dom type.

This won't add too much code, but it will be more cumbersome

repo

const [courseList, setCourseList] = createSignal<Course[]>();

const data = createAsync(async () => {

return DBCourseGetByTypeFromDB(p.courseType);

});

console.log("init");

createMemo(() => {

const d = data();

if (d) {

setCourseList(d)

}

});

If I do this, I will find that there are two "init" outputs, which means that the component function is executed twice, which is very strange.

What is the most suitable solution if I want to save the data obtained from createAsync into a Signal?

Hi, i recently started working with solidjs instead of angular and i was wondering what datepicker do you guys use. For angular i was using the datepicker from angular bootstrap library, but solid-bootstrap does not include a datepicker. What would be a good alternative?

• Great performance

• Pretty easy to understand

• Things like hono can be integrated to start easily

• Multiple style methods, just use clsx really

• Bugs with hydration, but I think many of these have been resolved

• Vinxi crashing

• I like using trpc and solid query, and it had fairly big bug for a year, but its fixed now

• View transitions api hasn't worked reliably with solid router especially on mobile browsers

With the release of React 19 and its new compiler architecture, I’ve been wondering about the potential impact on other JavaScript libraries like SolidJS and Preact. These libraries were created with a focus on performance, specifically to address issues like unnecessary re-renders and re-calculations in React. Now that React 19 promises to handle these issues automatically, what do you think will happen to these other libraries? Now that Reactjs has both huge community support and good performance, will other js libraries become less relevant?

I am new to Solid js, and trying to migrate React app to Solid js.

I want to know if this approach to use children as a function, like React, is desirable in Solid.

export const App = () => {
  return (
    <PwaProvider>
      {({ prefetch }) => <div>{JSON.stringify(prefetch)}</div>}
    </PwaProvider>
  );
};

export const PwaProvider = (props: {
  children: (props: { prefetch: number }) => JSX.Element;
}) => {
  const isPwa = isPwaMode();
  const [myInfo, setMyInfo] = createResource( ... )
  return <div>{props.children({ prefetch: myInfo() })}</div>;

I'm trying the solid tutorial.

First line fails

npx degit solidjs/templates/js my-app

npm error code ENOENT

npm error errno -4058

I have node 22.5.1 on windows 11

I did a npm cache clean --force as suggested by a google search but same result

Also tried it in my USER directory

EDIT: Adding an empty npm directory in AppData\Roaming fixed all the issues

Hey everyone! I'm excited to introduce a new form management library for solid.js that i worked on for the past couple of weeks @gapu/formix, Here are some features which you might want to check out:

• Simple APIs

• Validation using Zod schemas

• Efficient form state management

• Undo/Redo functionality

• Flexible field handling with useField and useArrayField hooks

• Advanced array operations (push, remove, move, swap, etc..)

• Easy form reset and submission

The initial goal was to create a simple and flexible library for personal use but i liked the end result so i decided to share it with everyone,

Check out the and the

or try it out yourself with npm install @gapu/formix

I'd like to hear your thoughts and feedback!

This is the site: .
Sadly, I'm having trouble making the web worker work. What could be the issue here?

Hear me out, double rendering on server and client sucks. Hydration, payloads... booo.

What if we could fetch data and HTML at the same time on the client and modify the HTML before rendering to get SSR like consistency (no UI jank) but with dynamic changes based on the user environment.

It's possible to make changes prerender from values in synchronous storage like local storage and cookies thanks to the experimental <script blocking="render" /> (Dark mode just got WAY easier!)

So, I played with this a bit and using XMLHttpRequest's to block the main thread, get data, and modify the page before it rendered.

"WHAT?? NO!! NOT ALLOWED!! You HAVE to use fetch! You CANNOT BLOCK!" blah, blah, blah error handling, time outs and aborts, check. Experiments and tests done. There's more than one way to crash a browser.

But is there a better way to do this? To let the browser do the prerender work? I love things like precaching, Cache API, etc. But the missing piece is dealing with local and server data at the same time without a bunch of loading jank, and tricks.

"We need a loading spinner." and "The page should load in less than 300ms" are contradictory statements in my eyes.

Hello,

Im quite new to Solid and wondering what is the best practice among the community to make a component prop reactive:

• making the prop an Accessor

• wrapping the normal non-reactive prop in createMemo (inside the component)

Thanks!

Edit: turns out when you call the getter (e.g. myProp() and then pass the value to the child, it remains reactive. That's the part I was missing

I'm a backend developer who has managed to avoid using React. I am now forced to choose a framework. I see a lot of posts praising the combination of Astro + Solidjs. Now comes SolidStart, which seems like it has a lot of overlap with with what Astro is solving for (Though solving it in a different way). I like the idea of MPA and islands but there's something to be said for getting the full stack from a single company or project. Also, I see SolidStart is now version 1, which means it's worth considering.

How should I be thinking about SolidStart in relation to Astro? I'm guessing they can't be combined, or can they?

• Astro + Solidjs (Obviously possible & good)

• Astro + SolidStart + SolidJs ???

In the case that they can't be used together, why would I want to choose SolidStart over Astro apart from just MPA vs SPA?

In the case that they can be used together, is it a good idea?

Hey there,

I've been using solidjs for the past week & have enjoyed it.

Curious if anyone uses an external library to craft emails (react-email alternative)?

I've been using React/Nextjs for about 4 years now. I would say i'm still new but today i tried SolidJs. I'm blown away at how logical everything is. I'm in love. Big shoutout to all the devs and you kind folks in the community.

I have been looking at solidjs source code. I was trying to see how the library loaded the app component into the browser entry point. Surprisingly, I found a render function which seem empty.

I wanted a clarification of what is solid doing when it we call render() to load our app. Thanks in advance

I am looking for a file based router for a solidjs that works similar to the Nextjs or SvelteKit router, i.e. has files for error, layout, page, etc. per path. This is a very clean and straightforward way to structure routes in a project.

Compared to this approach, I really dont like the file based routing with the official solidjs router which is unnecessary complicated with the file naming conventions. I am especially not a fan of having a folder and then a file outside this folder to define the layout (e.g. "auth" folder and auth.tsx on the same level).

I looked on npm and the solidjs ecosystem but couldn't find a promising alternative. I hope you guys can give me a tip :) Thx.

I'm relatively new to SolidJS (mostly used Vue in the past). I'm trying to figure out how to deterministically test when a components `createResource` promise has resolved.

Vue has a `flushPromises` utility function to handle this:

flushPromises flushes all resolved promise handlers. This helps make sure async operations such as promises or DOM updates have happened before asserting against them.

Does SolidJS have an equivalent? I tried finding something in the docs but nothing came up.

What I want to be able to do is create a component test that:

1. Asserts loading state

2. Awaits createResource resolved

3. Assert not in loading state and that data is rendered

I know that there are async `findBy` helpers in the `testing-library` package but that feels a bit non-deterministic for asserting whether a promise has resolved

Hi ! I’m a Solid noob, trying out a few JS frameworks for a project that is starting to be a bit too complex for just vanilla JS. It’s a web component that is meant to be reusable anywhere I want, I stumbled upon the `solid element` library, but I don’t really get how I’m supposed to use it. Is there a way to “export” the generated web component in a file, and use it else where ?

I am trying to figure out to pass route elements to root element in typescript. I am currently using "@solidjs/router": "^0.13.6". Here is a demo of what I want to achieve. I want to do config based routing for my project.

export const routes: RouteDefinition[] = [
  {
    path: '/',
    component: Home,
  },
]

const App: Component = (children: JSX.Element) => {
  return (
    <>
      <Navbar />
      <main>
        {children}
      </main>
      <Footer />
    </>
  );
}


render(
  () => (
    <Router root={App}>
      {routes}
    </Router>
  ),
  root,
);

It is giving me type errors. I have no clue of what types to use, or if my structure is correct at all. App gives me this error:

Type '(children: JSX.Element) => JSX.Element' is not assignable to type 'Component'.
  Types of parameters 'children' and 'props' are incompatible.
    Type '{}' is not assignable to type 'Element'.

{children} gives me this error:

Property 'children' does not exist on type 'JSX.IntrinsicElements'

I'm doing a test project on solidjs using ThreeJs and faced the problem of handling clicks, mouseovers, etc.

I found a Raycaster solution, but it's too bulky. Does anyone know a more beautiful solution to solve this problem?