SolidJS First Try Review

Posted on: 2022-03-03

After building a smallish component in a few hours, this blog post is a quick review of SolidJS framework. Thus, it is not an in-depth review.

In a nutshell, SolidJS is an alternative to React. The main selling point of the SolidJS framework is that it relies on JSX, with a very similar way to build components like React but handles rendering in a less error-prone and faster way than React.

I'll go through a couple of features in a second, but if you are interested in learning more about SolidJS, I recommend the step-by-step tutorial on their website. You will understand why it is a step forward to React within one hour.

The Project: Small Component

The project is a slider that lets me move up and down a div that acts like a handle that allows the user to adjust the weight. The quantity of water determines the weight in a tank.

State

React Hook relies on Hook and has the useState. A change in the state renders the component again. With SolidJS, we must use createSignal. The name is different but also how it behaves. Instead of rendering the whole component again, the framework is smart enough to render only the portion using the state. It means that if you have a console.log in your component, you will get an entry the first time the component is rendered but not every time the state changes.

Here is an example where the weight is entered with a default value, and when the user adjusts the weight, we are setting the value again.

const [currentWeight, setCurrentWeight] = createSignal(props.defaultWeight);

In my code, I have the setCurrentWeight called directly on the mousemove. The component does not render all over again while the user drags the handler.

<span class={styles.SingleWeightSelectorWeight_Number}>
  {currentWeight()}
</span>

There is a minor difference: the state is accessible with a function instead of a variable. The difference makes the framework known when the state is changing to alter this portion of the component instead of the whole component.

CreateMemo

The water height (in pixel) is calculated from the weight (lbs) in this demo. Hence, we need to calculate get the pixel from a function. SolidJS has effect (Like React Effect but called createEffect) and Memoization function. The createMemo function is very similar to useMemo with a small difference.

const getWaterHeight = createMemo((): number => {
  return (
    (currentWeight() / (props.maximumWeight - props.minimumWeight)) *
    props.height
  );
});

The memo does not need to have the array of dependencies. Nor need the useEffect. The SolidJS handles it for you. In the example above, the currentWeight() is detected by SolidJS to be a dependency. When the state change, it invalidates the memoization. The implicit dependency is great because you do not have to rely on an external tool (like a Linter) to handle dependencies. You can code without worrying about side effects like stale data.

import styles from "./SingleWeightSelectorHandle.module.css";

// Later in the file
<div class={styles.SingleWeightSelectorHandleData}>
        //...
</div>

classList={{
  [styles.SingleWeightSelectorHandle]: true,
  [styles.SingleWeightSelectorHandle_Unpressed]: !isDragging(),
  [styles.SingleWeightSelectorHandle_Pressed]: isDragging(),
}}