The first time I heard about Signals was in this tweet from Miško Hevery (the creator of Angular). He summarized them as a combination of useState, useRef, and useMemo:
Although it looks great, it doesn’t make sense at first glance. So, I did not understand what he meant. I have a great respect for him, I am really quite a fan of all his job and trajectory, even prior to Angular. So, I continued reading that thread. However, in the next tweet, I found the following code:
My impression was devastating. It was like seeing a hero falling. Why did he make React example so overly complex? It made no sense at all. There is no need for the “useRef”, neither for “useEffect”. Just a
setCount(oldCount => oldCount + 1) would do the trick. But on the other hand, useSignal looked exactly as useRef. How did he expect to manipulate the signal like a ref, and hope for a magical re-render? That seemed like a terrible mistake.
After three long months of poring over his work, the veil lifted and the magic behind the trick revealed itself. It was nothing short of brilliant!
And now, I will reveal the trick behind the magic of signals.
Chapter 0: Preact Signals
In this article, I will use the notation of Signals as implemented by Preact. I did not read the full code, neither used them, but I am using them because they probably will look more like the ones that React will eventually support.
You can learn more here: