Reactivity in frontend frameworks and what's the deal with signals?
Reactivity
Gaute Meek Olsen
Reactivity in frontend frameworks and what's the deal with signals?
Reactivity
1
Gaute Meek Olsen
2
Spreadsheet
| A | B | C | |
|---|---|---|---|
| 0 | x | y | x + y |
| 1 | |||
| 2 |
3
What’s the deal with signals?
4
What’s the deal with signals?
5
What’s the deal with signals?
6
What’s the deal with signals?
SyntaxError: Failed to execute 'querySelector' on 'Element': '#1otSL' is not a valid selector.
7
What’s the deal with signals?
8
What’s the deal with signals?
function signal(value) {
return {
get value() {
// track
return value
},
set value(newValue) {
value = newValue
// notify all trackers
}
}
}9
Reactivity table
| mutable vs immutable API | |||||||
| State is always in sync | |||||||
| Re-render | |||||||
| Works outside the component | |||||||
| Works outside the framework |
10
Reactivity table
| mutable vs immutable API | ||||||
| State is always in sync | ||||||
| Re-render | ||||||
| Works outside the component | ||||||
| Works outside the framework |
11
Count: 0
Console:
12
React
- Hooks 2019, v16.8
13
React reactivity
export function Component() {
function increase() {
}
return (
<>
<p>Count: 0</p>
<button onClick={increase}>Bump</button>
</>
)
}14
React reactivity
import { useState } from 'react'
export function Component() {
const [count, setCount] = useState(0)
function increase() {
setCount(count + 1)
}
return (
<>
<p>Count: {count}</p>
<button onClick={increase}>Bump</button>
</>
)
}15
React reactivity
import { useState } from 'react'
export function Component() {
const [count, setCount] = useState(0)
const double = count * 2
function increase() {
setCount(count + 1)
}
return (
<>
<p>Count: {count}</p>
<button onClick={increase}>Bump</button>
</>
)
}16
React reactivity
import { useState, useMemo } from 'react'
export function Component() {
const [count, setCount] = useState(0)
const double = useMemo(() => count * 2, [count])
function increase() {
setCount(count + 1)
}
return (
<>
<p>Count: {count}</p>
<button onClick={increase}>Bump</button>
</>
)
}17
React reactivity
import { useState } from 'react'
export function Component() {
const [count, setCount] = useState(0)
const double = count * 2
function increase() {
setCount(count + 1)
}
return (
<>
<p>Count: {count}</p>
<button onClick={increase}>Bump</button>
</>
)
}18
React reactivity
import { useState, useEffect } from 'react'
export function Component() {
const [count, setCount] = useState(0)
const double = count * 2
useEffect(() => console.log(double), [double])
function increase() {
setCount(count + 1)
}
return (
<>
<p>Count: {count}</p>
<button onClick={increase}>Bump</button>
</>
)
}19
React reactivity
import { useState, useEffect } from 'react'
export function Component() {
const [count, setCount] = useState(0)
const double = count * 2
useEffect(() => console.log(double), [double])
function increase() {
setCount(count + 1)
console.log(count) // 0
console.log(double) // 0
}
return (
<>
<p>Count: { count }</p>
<button onClick={increase}>Bump</button>
</>
)
}20
React reactivity
import { useState, useEffect } from 'react'
const [count, setCount] = useState(0) // ❌
export function Component() {
const double = count * 2
useEffect(() => console.log(double), [double])
function increase() {
setCount(count + 1)
console.log(count) // 0
console.log(double) // 0
}
return (
<>
<p>Count: { count }</p>
<button onClick={increase}>Bump</button>
</>
)
}21
React re-render
22
React summary
| mutable vs immutable API | Immutable |
| State is always in sync | |
| Re-render | |
| Works outside the component | |
| Works outside the framework |
23
Vue
- Composition API 2020, v3
24
Vue reactivity
<script setup>
function increase() {
}
</script>
<template>
<p>Count: 0</p>
<button @click="increase">Bump</button>
</template>25
Vue reactivity
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increase() {
count.value++
}
</script>
<template>
<p>Count: {{count}}</p>
<button @click="increase">Bump</button>
</template>26
Vue reactivity
<script setup>
import { reactive } from 'vue'
const state = reactive({ count: 0})
function increase() {
state.count++
}
</script>
<template>
<p>Count: {{state.count}}</p>
<button @click="increase">Bump</button>
</template>27
Vue reactivity
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increase() {
count.value++
}
</script>
<template>
<p>Count: {{count}}</p>
<button @click="increase">Bump</button>
</template>28
Vue reactivity
<script setup>
import { ref, computed } from 'vue'
const count = ref(0)
const double = computed(() => count.value * 2)
function increase() {
count.value++
}
</script>
<template>
<p>Count: {{count}}</p>
<button @click="increase">Bump</button>
</template>29
Vue reactivity
<script setup>
import { ref, computed, watchEffect } from 'vue'
const count = ref(0)
const double = computed(() => count.value * 2)
watchEffect(() => console.log(double))
function increase() {
count.value++
}
</script>
<template>
<p>Count: {{count}}</p>
<button @click="increase">Bump</button>
</template>30
Vue reactivity
<script setup>
import { ref, computed, watchEffect } from 'vue'
const count = ref(0)
const double = computed(() => count.value * 2)
watchEffect(() => console.log(double))
function increase() {
count.value++
console.log(count.value) // 1
console.log(double.value) // 2
}
</script>
<template>
<p>Count: {{count}}</p>
<button @click="increase">Bump</button>
</template>31
Vue reactivity
state.js:
import { ref, computed, watchEffect } from 'vue'
export const count = ref(0)
const double = computed(() => count.value * 2)
watchEffect(() => console.log(double))Component.vue:
<script setup>
import { count } from 'state.js'
function increase() {
count.value++
}
</script>
<template>
<p>Count: {{count}}</p>
<button @click="increase">Bump</button>
</template>32
Vue re-render
SyntaxError: Failed to execute 'querySelector' on 'Element': '#4QXF9' is not a valid selector.
33
Vue summary
| mutable vs immutable API | Mutable |
| State is always in sync | |
| Re-render | |
| Works outside the component | |
| Works outside the framework |
34
Solid
- Signals 2021, v1
35
Solid reactivity
import { createSignal, createEffect } from 'solid-js'
export function Component() {
const [count, setCount] = createSignal(0)
const double = () => count() * 2
createEffect(() => console.log(double()))
function increase() {
setCount(count() + 1)
}
return (
<>
<p>Count: { count() }</p>
<button onClick={increase}>Bump</button>
</>
)
}36
Solid reactivity
import { createSignal, createEffect } from 'solid-js'
export function Component() {
const [count, setCount] = createSignal(0)
const double = () => count() * 2
createEffect(() => console.log(double()))
function increase() {
setCount(count() + 1)
console.log(count()) // 1
console.log(double()) // 2
}
return (
<>
<p>Count: { count() }</p>
<button onClick={increase}>Bump</button>
</>
)
}37
Solid reactivity
import { createSignal, createEffect } from 'solid-js'
const [count, setCount] = createSignal(0)
const double = () => count() * 2
createEffect(() => console.log(double()))
function increase() {
setCount(count() + 1)
}
export function Component() {
return (
<>
<p>Count: { count() }</p>
<button onClick={increase}>Bump</button>
</>
)
}38
Solid re-render
39
Solid summary
| mutable vs immutable API | Immutable |
| State is always in sync | |
| Re-render | |
| Works outside the component | |
| Works outside the framework |
40
Preact
- Signals 2022, @preact/signals
41
Preact reactivity
export function Component() {
function increase() {
}
return (
<>
<p>Count: 0</p>
<button onClick={increase}>Bump</button>
</>
)
}42
Preact reactivity
import { signal } from '@preact/signals'
export function Component() {
const count = signal(0)
function increase() {
count.value++
}
return (
<>
<p>Count: {count}</p>
<button onClick={increase}>Bump</button>
</>
)
}43
Preact reactivity
import { signal, computed } from '@preact/signals'
export function Component() {
const count = signal(0)
const double = computed(() => count.value * 2)
function increase() {
count.value++
}
return (
<>
<p>Count: {count}</p>
<button onClick={increase}>Bump</button>
</>
)
}44
Preact reactivity
import { signal, computed, effect } from '@preact/signals'
export function Component() {
const count = signal(0)
const double = computed(() => count.value * 2)
effect(() => console.log(double.value))
function increase() {
count.value++
}
return (
<>
<p>Count: {count}</p>
<button onClick={increase}>Bump</button>
</>
)
}45
Preact reactivity
import { signal, computed, effect } from '@preact/signals'
export function Component() {
const count = signal(0)
const double = computed(() => count.value * 2)
effect(() => console.log(double.value))
function increase() {
count.value++
console.log(count.value) // 1
console.log(double.value) // 2
}
return (
<>
<p>Count: {count}</p>
<button onClick={increase}>Bump</button>
</>
)
}46
Preact reactivity
import { signal, computed, effect } from '@preact/signals'
const count = signal(0)
const double = computed(() => count.value * 2)
effect(() => console.log(double.value))
function increase() {
count.value++
}
export function Component() {
return (
<>
<p>Count: {count}</p>
<button onClick={increase}>Bump</button>
</>
)
}47
Preact re-render
48
Preact summary
| mutable vs immutable API | Mutable |
| State is always in sync | |
| Re-render | |
| Works outside the component | |
| Works outside the framework |
49
Angular
- Signals 2023, v16
50
Angular reactivity
import { Component } from '@angular/core'
@Component({
selector: 'count-component',
templateUrl: './count.component.html',
})
export class CountComponent {
increase() {
}
}51
Angular reactivity
import { Component, signal } from '@angular/core'
@Component({
selector: 'count-component',
templateUrl: './count.component.html',
})
export class CountComponent {
count = signal(0)
increase() {
this.count.set(this.count() + 1)
}
}52
Angular reactivity
import { Component, signal, computed } from '@angular/core'
@Component({
selector: 'count-component',
templateUrl: './count.component.html',
})
export class CountComponent {
count = signal(0)
double = computed(() => this.count() * 2)
increase() {
this.count.set(this.count() + 1)
}
}53
Angular reactivity
import { Component, signal, computed, effect } from '@angular/core'
@Component({
selector: 'count-component',
templateUrl: './count.component.html',
})
export class CountComponent {
count = signal(0)
double = computed(() => this.count() * 2)
constructor() {
effect(() => console.log(this.double()))
}
increase() {
this.count.set(this.count() + 1)
}
}54
Angular reactivity
import { Component, signal, computed, effect } from '@angular/core'
@Component({
selector: 'count-component',
templateUrl: './count.component.html',
})
export class CountComponent {
count = signal(0)
double = computed(() => this.count() * 2)
constructor() {
effect(() => console.log(this.double()))
}
increase() {
this.count.set(this.count() + 1)
console.log(this.count()) // 1
console.log(this.double()) // 2
}
}55
Angular reactivity
import { Component, signal, computed, effect } from '@angular/core'
const count = signal(0)
const double = computed(() => count() * 2)
@Component({
selector: 'count-component',
templateUrl: './count.component.html',
})
export class CountComponent {
count = count
double = double
constructor() {
effect(() => console.log(double()))
}
increase() {
count.set(count() + 1)
}
}56
Angular re-render
SyntaxError: Failed to execute 'querySelector' on 'Element': '#62rXY' is not a valid selector.
57
Angular summary
| mutable vs immutable API | Immutable |
| State is always in sync | |
| Re-render | |
| Works outside the component | (2/3) |
| Works outside the framework | (2/3) |
58
Svelte
- Runes 202?, v5
59
Svelte 4 reactivity
<script>
let count = 0
$: double = count * 2
function increase() {
count++
}
</script>
<p>Count: { count }</p>
<button on:click={increase}>Bump</button>60
Svelte 5 reactivity
<script>
let count = $state(0)
const double = $derived(count * 2)
function increase() {
count++
}
</script>
<p>Count: { count }</p>
<button on:click={increase}>Bump</button>61
Svelte 5 reactivity
<script>
let count = $state(0)
const double = $derived(count * 2)
$effect(() => console.log(double))
function increase() {
count++
}
</script>
<p>Count: { count }</p>
<button on:click={increase}>Bump</button>62
Svelte 5 reactivity
<script>
let count = $state(0)
const double = $derived(count * 2)
$effect(() => console.log(double))
function increase() {
count++
console.log(count) // 1
console.log(double) // 2
}
</script>
<p>Count: { count }</p>
<button on:click={increase}>Bump</button>63
Svelte 5 reactivity
state.js:
export let count = $state(0) // ❌64
Svelte 5 reactivity
state.svelte.js:
class Count {
value = $state(0)
}
export const count = new Count()65
Svelte 5 re-render
66
Svelte summary
| v4 | v5 | |
|---|---|---|
| mutable vs immutable API | Mutable | Mutable |
| State is always in sync | ||
| Re-render | ||
| Works outside the component | ||
| Works outside the framework |
67
Reactivity API
| State | useState | ref/reactive | createSignal | signal | signal | $state |
| Computed | useMemo | computed | () => | computed | computed | $derived |
| Effect | useEffect | watchEffect | createEffect | effect | effect | $effect |
68
Reactivity table
| mutable vs immutable API | Immutable | Mutable | Immutable | Mutable | Immutable | Mutable |
| State is always in sync | ||||||
| Re-render | ||||||
| Works outside the component | (2/3) | |||||
| Works outside the framework | (2/3) |
69
Takk for mæ!
70