What are Signals ?

• A container for a value
• State & UI updates
  automatically when
  value changes

Not the only way

• VDOM: React
• Dirty checking: Angular

Why are Signals good?

THIS IS THE WAY

What do we need?

1. Know who uses the value
2. Know when the value changes

Plain variable 📦

• A container for a value ✅
• Doesn’t know who uses the value ❌
• Doesn’t know when it’s value changes ❌

Functions ✨

• Can return a (contained) value ✅
• Can pass in a new value ✅
• Knows when it's called ✅
• Knows who calls it 🤔

EXAMPLES

SolidJS signals

            const [count, setCount] = createSignal(0);

            const increment = () => setCount(count() + 1);
          

            
Count: {count()}
          

Angular signals

            const count = signal(0);

            const increment = () => count.set(count() + 1);
          

            
Count: {{ count() }}
          

Vue refs

            const count = ref(0)

            const increment = () => count.value++
          

            
Count: {{ count }}
          

1. signal: container for a value
2. effect: tracks signals used inside function
3. signal: updates trigger effect re-execution
4. computed: syntax sugar for a signal
   calculated from effect

Pitfalls

• Conditionals: only signals trigger execution/
  can only track what is used
• Async: can only track what is used within scope
• Destructuring: can not track if you take the value out of the container

DISCLAIMER

The following demonstration is meant for educational purposes only.
The demonstration contains raw html code and vanilla JavaScript, without any framework, bundling or build step.
Viewer discretion is advised.