From React to Solid.js: A Smooth Transition
SolidJS does that with great effectiveness, especially for React developers
It's a fact that Web Frameworks come and go. Although, for more or less 10 years Angular and React are dominating the market. But how many times have you heard during interviews the following questions:
Can you compare Angular vs React? What are the pros and cons of both? When to use one over another?
But wait… So do we actually have only two options? Some excessively pragmatic person might say that this is true. It seems reasonable to bet on frameworks/libraries supported by big companies and used by millions. They are more reliable and we have more guarantee that they will be supported for a long time.
However, what do you consider a high-risk bet?
I propose a look over Solid.js. An open-source JavaScript Library. The proposal of this lib is to bring good things that we find on React and improve some other parts, bringing a different algorithm for managing components rendering (which is blazingly fast). Observe below how close SolidJS gets to vanilla Javascript in terms of performance. That's absolutely amazing!
But how hard is it to switch from React to SolidJS? A piece of cake! In this post, I'll try to show how to move to SolidJS real quick!
Basic structure and syntax
Solid only supports function components. Observe the example below:
How can something be more similar to React than this? The structure is just the same and it has support for Typescript. We can notice a difference though: class instead of className (It also supports conditional classes).
When it comes to event listening, SolidJS gets super close to the DOM events. We can listen to raw events by adding on as a prefix. Take a look at how to capture the mousemove event on the code snippet above.
You will note some other small differences when exploring this library a bit more deeper, but in general, can we agree that it looks almost the same as React?
State management
There are a few ways of managing the state in a React application. Either you can do this locally, using useState or useReducer, or you can implement a context in a branch from your component's tree. As an outsourcing solution, you can make use of a state management library like Redux or Mobx.
My goal is not to defend any of these solutions, but to show you how SolidJS can implement them.
At component level
The useState we know from React becomes a createSignal in SolidJS. To access the value of the state we need to invoke it.
Is also possible to create derived signals, as we do it with doubleCount. By accessing the component state, the derived values will carry the reactivity with them, by triggering any effects that depend on them.
Unlike React and the behavior we would expect from useState, the count state is not just a number. It’s a function that returns a number and, by calling this function we end up by subscribing for that value.
useMemo vs createMemo
The useMemo in React works as simple as caching the last result until a value that is being watched changes.
With Solid’s createMemo things get a bit simpler.
There is no need for watching the count value changes. Since count is actually a function that provides a subscription, the createMemo function creates a bond with it. The value returned by the createMemo is also a function, so we need to invoke it when we want to use its value.
Global state
Sometimes doing just local state management can lead to a mess, right? To avoid too much property drilling, SolidJD has a super simple solution. Since we are dealing with the concept of signals, we can simply extract all of our local signals as declare them on a store.ts file.
How good is that?! How simple is that?! Really, this is amazing. You just need to declare your state, export them, and wherever you use them, subscriptions will be made!
This approach opens a variety of different strategies. You can make a global store, you can make some partial stores, you can compose stores. This is freedom!
Control Flows
There is one kind of structure that we will never get rid of during our application development: lists. When using React we are often doing that by simply creating a map and returning JSX. In React we need to worry about passing a unique value to the key attribute, so React doesn’t have to re-render the whole list when a single element changes.
SolidJs does this a bit differently, using the For tag:
The good thing about Solid’s approach is that we don’t need to worry about keys and performance. The index (i) from a list is also a signal. So the list gets subscribed to the indexes and when changes happen Solid knows exactly where to update.
In addition to that, SolidJS also provides one more option to render lists: the Index tag. It improves the performance if the values you are iterating on are primitives.
Routes
If you implement routes on your React app with react-router-dom I must say that you will have almost no work to do here. Just replace it by solid-app-router ! (With a small difference: a Link component will have a property href instead of to )
Learning new frameworks/libraries or technologies might be challenging. Better if we have the option of re-using our knowledge and adding one more skill to our list. Solid.js does that with great effectiveness, especially for React developers.
Are you curious to understand why SolidJS is so fast? Well, instead of Virtual DOM, it uses a fine-grained reactive solution, by compiling templates directly into the dom. Who better than the creator of SolidJS to explain how it works.
Cheers!
Additional video: Replacing React with SolidJS.
