Signals, computed values, and effects are concepts introduced in modern web development frameworks to manage state and reactivity efficiently. From Angular 16 to nowadays. The coded example could be found on my playground here.
Let’s explain how signals, computed, and effect work using a simple example with croquettes (a type of food for my little cat Yuki).
Signals
Imagine you have a bowl of croquettes for your pet. The number of croquettes in the bowl is like a signal. You can look at the bowl and see how many croquettes are there. In our example, we start with 50 croquettes.
Computed
Now, let’s say you want to know if the bowl is running low on croquettes. You decide that if there are less than 20 croquettes, it’s low. This sounds like a computed signal. It doesn’t change the number of croquettes, but it tells you if the number is below 20.
Effect
Finally, let’s say you have a rule: if the bowl is low on croquettes, you will add more croquettes. This rule here is an effect. It watches the computed signal and, if it says the bowl is low, it adds a random number of croquettes (between 50 and 70) to the bowl after 1000 seconds (So we can see the animation).
Putting It All Together
- Signal: The number of croquettes in the bowl (croquettesRate).
- Computed: Checks if the number of croquettes is below 20 (isLowCroquettes).
- Effect: Adds more croquettes if the bowl is low.
