Solidjs Gotchas

Solidjs is supposed to be a simple and performant libraries for manipulating the DOM. It looks at first sight a bit like React but there are some very important differences that can cause some errors that are hard to debug.

No Destructuring

The biggest gotcha in Solidjs that I've seen is that you absolutely shouldn't destructure the props to a component. This is called out in the docs, but it's so natural in JS to destructure object parameters that I keep making this mistake. (That is, in fact, why I'm writing this article.)

The solution is that you should always access props by indexation. You can also create your own "fake signals" which make it look more like you're using signals like the rest of your code. (eg. const fakeSignal = () => props.myParameter;)

State in Solid Start

SolidStart is the full-stack framework for Solid. One very important gotcha I've found is that components are re-run on the client but not re-rendered. What this means is that you should absolutely create any dynamic state in an onMount call, or you will have incomprehensible errors where your DOM state is not in sync with the state of your app.

The same thing is actually true in React as well, but React shows an error in DevMode about a hydration mismatch. This is one point where React being an older and more battle-tested library works in its favor.

This article was written on 18-feb-2025.