The Magic of Signals: Or Why React Does Not Support Them. Yet.

Magicians do not reveal their tricks; Well, I’m not a magician, so you will discover the trick of signals.

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: