@@ -51,11 +51,11 @@ Derived state is declared with the `$derived` rune:
5151``` diff
5252<script>
5353 let count = $state(0);
54- + let double = $derived(count * 2);
54+ + let doubled = $derived(count * 2);
5555</script>
5656
5757<button on:click={() => count++}>
58- {double }
58+ {doubled }
5959</button>
6060
6161+ <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
9292``` diff
9393<script>
9494 let count = $state(0);
95- let double = $derived(count * 2);
95+ let doubled = $derived(count * 2);
9696
9797+ $effect(() => {
9898+ // runs when the component is mounted, and again
99- + // whenever `count` or `double ` change,
99+ + // whenever `count` or `doubled ` change,
100100+ // after the DOM has been updated
101- + console.log({ count, double });
101+ + console.log({ count, doubled });
102102+
103103+ return () => {
104104+ // 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
110110</script>
111111
112112<button on:click={() => count++}>
113- {double }
113+ {doubled }
114114</button>
115115
116116<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
158158</script>
159159
160160<div bind:this={div}>
161- {#each message as message}
161+ {#each messages as message}
162162 <p>{message}</p>
163163 {/each}
164164</div>
0 commit comments