SolidJS — React meets Svelte?

  • 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.

Setting Up a SolidJS Project

Just run the following command to generate a new project…

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;

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.

  • JSX automatically will compile into createEffect calls which is why they will update when state updates.

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

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