SolidJS — React meets Svelte?

React is by far the biggest frontend Javascript framework in modern web development. Although, Svelte has been growing steadily in popularity over the last few years. What makes Svelte so special.

  • Very easy to learn syntax
  • Instead of shipping the framework to the browser the code is compiled to standard js, resulting in MUCH smaller bundle size and blazing fast code.

People already love or are at least pretty familiar with the React Syntax, but the latter benefit of compiling to standard JS could be a nice addition to React, enter SolidJS.

SolidJS is a frontend UI framework whose syntax is very similar to React but is compiled to modern javascript like Svelte is allowing people to get the speed and bundle sizes of Svelte but use the React syntax they are used to.

Setting Up a SolidJS Project

Just run the following command to generate a new project…

npm init solid app ProjectName

or for typescript

npm init solid app-ts ProjectName

What’s the same

  • The file structure of the generated project should feel pretty much like a create-react-app
  • JSX still works like JSX

State

So in React you would normally use the useState hook to generate a state variable and the process still pretty much works the same in SolidJS except now we use the createSignal function.

import {createSignal} from "solid-js"
import './App.css';
function App() { // create state
const [count, setCount] = createSignal(1)
// add function
const add = () => {
//notice in this context I must invoke the state to get the value (not in jsx)
setCount(count() + 1)
}
// JSX works like normal
return (
<div class="App">
<h1>My Counter</h1>
<h2>{count}</h2>
<button onClick={add}>Add</button>
</div>
);
}
export default App;

One thing to be aware of is the while it looks like React, you are really getting back a getter and setter function, so notice we used count as a function in our add function. From what I can tell the setter emits an event after updating the state vs React which instead of an event re-runs the component function and optimizes duplicative work with a virtual dom.

Lifecycle and createEffect

Here is where Thinking in Solid is very different in thinking in React. In React the whole component is a function that re-runs each time you state updates making infinite loops possible when changing the state on function calls in the component’s function body. In React, the solution to this is to move this kind of code into it’s own closure with the useEffect hook to run when desired not on every render of the component function.

Solid doesn’t use a virtual DOM and on state updates it doesn’t run the component function again. Instead, Reactive code is wrapped in createEffect calls which then re-runs the function when any signal inside of them are updated. The benefit of this is…

  • You can make Fetch/Axios calls without having to wrap them in useEffect to avoid infinite loops
  • JSX automatically will compile into createEffect calls which is why they will update when state updates.

So in the snippet below, the only code that reflects the updates to state is the JSX express and the code in the createEffect. Since neither uses count2, count2 triggers no changes on each update.

The nice thing about this is updates are more granular making the need for the expense of a virtual dom unnecessary (only code that depends on the updated data will change without having to run any comparisons.)

Bottom Line

Solid retains what is great about the React Syntax but also makes use of the performance-enhancing approaches of Svelte. I would not be surprised to see SolidJS grow in the same vein of Frameworks like Svelte and React!

--

--

--

Alex Merced is a Full Stack Developer, learn more about his work at AlexMercedCoder.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Internationalization of Angular applications

JavaScript Component

REACT COMPONENT AND PROPS

4 Best JavaScript Books for Beginners

React: Class vs functional components

Top Benefits of Node.js and AngularJS

Customize SharePoint Online’s “Sort By” Option in Search

How to Get Information About User Network Connection in JavaScript

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alex Merced Coder

Alex Merced Coder

Alex Merced is a Full Stack Developer, learn more about his work at AlexMercedCoder.com

More from Medium

React countdown timers simplified.

Form with TypeScript (in React)

React: Update dynamic content dynamically depends on Device Screen sizes

Setting up Jest on Preact + Mobx +TypeScript + Pug environment