@@ -51,11 +51,11 @@ Derived state is declared with the `$derived` rune:
51
51
``` diff
52
52
<script>
53
53
let count = $state(0);
54
- + let double = $derived(count * 2);
54
+ + let doubled = $derived(count * 2);
55
55
</script>
56
56
57
57
<button on:click={() => count++}>
58
- {double }
58
+ {doubled }
59
59
</button>
60
60
61
61
+ <p>{count} doubled is {doubled}</p>
@@ -92,13 +92,13 @@ To run code whenever specific values change, or when a component is mounted to t
92
92
``` diff
93
93
<script>
94
94
let count = $state(0);
95
- let double = $derived(count * 2);
95
+ let doubled = $derived(count * 2);
96
96
97
97
+ $effect(() => {
98
98
+ // runs when the component is mounted, and again
99
- + // whenever `count` or `double ` change,
99
+ + // whenever `count` or `doubled ` change,
100
100
+ // after the DOM has been updated
101
- + console.log({ count, double });
101
+ + console.log({ count, doubled });
102
102
+
103
103
+ return () => {
104
104
+ // if a callback is provided, it will run
@@ -110,7 +110,7 @@ To run code whenever specific values change, or when a component is mounted to t
110
110
</script>
111
111
112
112
<button on:click={() => count++}>
113
- {double }
113
+ {doubled }
114
114
</button>
115
115
116
116
<p>{count} doubled is {doubled}</p>
@@ -158,7 +158,7 @@ In rare cases, you may need to run code _before_ the DOM updates. For this we ca
158
158
</script>
159
159
160
160
<div bind:this={div}>
161
- {#each message as message}
161
+ {#each messages as message}
162
162
<p>{message}</p>
163
163
{/each}
164
164
</div>
0 commit comments