Reactivity primitives in SolidJS

Introduce

Hello everyone, we meet again
In the previous episode in the series, I shared about how to create a SolidJS project and the basic operation of a SolidJS application.

In this episode 3, you and I will learn about Reactivity primitives of SolidJS .

Content

Reactivity primitives

• Signals
• Effects
• Memo

“Reactivity primitives” are a concept in web programming and are part of techniques for handling user interactions on interfaces. It includes basic methods for handling interaction events and updating the interface in real time.

Vd: thao tác nhấn vào một nút trên web là một phương thức tương tác cơ bản và có thể được sử dụng để xử lý sự kiện nhấp chuột hoặc gõ từ bấm phím.

Reactivity primitives – What are Signals?

As one of the fundamental definitions of reactivity primitives in Solid, it represents a state, a value, a function, data or signal that you need to represent in the interface…

when you change the value of signals , it will automatically update to anywhere and anything that is using the value of that signals .

Initialize a signal:

Here we can understand the following:

• The 0 argument passed to the createSignal() function is called the initialization value .
• The return value is an array of two functions. Use destructuring in Javascript to be able to name these functions. I named the getter function count and the setter function setCount .
• In the above example, if we want to log the count value, it will not work, instead we have to call the count() function to get the desired return value.

• The setCount() function is used to update the return value (count) through the count() function.

Do you see the same syntax in ReactJS?  Comment to let me know if Signals is similar or different from the useState function in ReactJS .

Reactivity primitives – What are Effects?

Signals are values ​​that we can monitor and use, but they are only half the story.

Effects execute based on the value of Signals changes. Now Effects creates a side effect (side effect) that depends on the Signals signal.

I have a small example of counting numbers as follows:

You can copy the above code and paste it into https://playground.solidjs.com/ to run the video directly, or you can try it right on the source code created in the previous episode ^^

I will explain the above example as follows:

• We have initialized 1 Signals with a value of 0
• Then continue we use the createEffect() function and pass in a function to log (displayed on the tab Console ) the current count value count()
• Next in the interface we have 1 button, when clicked will increase the count to +1 unit

When we use the createEffect() function it will always create a side effect to let us know how the count() value changes.

Before we click on the Click Me button, this side effect has been executed and it console.log("The count is now", count()) the initial initial value is 0 .

Then every time we click on the Click Me button, the count() value will increase by 1 -> also means a side effect (side effect) console.log("The count is now", count())

You can also use multiple createEffect() functions, each Effect will generate a side effect according to each Signal in the same Component <Counter/>

Reactivity primitives – What are Memos?

Most of the jobs we come across can use Signals to suffice. However, sometimes we will encounter cases where we have to handle repetitive tasks. So what is the solution?

createMemo creates a signal (Signal) whose main job is to read and recalculate its value whenever the value changes or updates.

We will use createMemo when we want to cache some values ​​and access them without considering retrieving them, until a dependency changes.

For example, I want to display the count() 100 times and update the count value when the button is clicked —> using createMemo() will allow the recalculation to happen only once for every click

This is very beneficial for the computation and memory usage of effects, data with dependencies, and above all, it reduces the work that needs to be done for performance-intensive operations such as DOM generation, computation, and so on. value math….

Let’s recap episode 3

In this episode 3 we learned about the main features of Reactivity primitives like Signals , Effects and Memos .

In the next episode, I will go to the next part:

• 🔄 Lifecycle methods
  • onMount
  • onCleanup
  • onError

Thank you for watching episode 3 in the series about SolidJS . If you have any questions or suggestions about the article, please comment to help me, thank you

Reference

https://www.solidjs.com/tutorial/introduction_signals https://www.solidjs.com/tutorial/introduction_effects https://www.solidjs.com/tutorial/introduction_memos