Skip to content

Commit 87c9632

Browse files
authored
Apply suggestions from code review
1 parent 0ec8710 commit 87c9632

File tree

1 file changed

+19
-0
lines changed

1 file changed

+19
-0
lines changed

documentation/docs/02-runes/05-$props.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,8 @@ Destructuring allows us to declare fallback values, which are used if the parent
4444
let { adjective = 'happy' } = $props();
4545
```
4646

47+
> [!NOTE] Fallback values are not turned into reactive state proxies (see [Updating props](#Updating-props) for more info)
48+
4749
## Renaming props
4850

4951
We can also use the destructuring assignment to rename props, which is necessary if they're invalid identifiers, or a JavaScript keyword like `super`:
@@ -146,6 +148,23 @@ However if the value passed in by the parent component is itself a deeply reacti
146148
</button>
147149
```
148150

151+
The fallback value of a prop not declared with `$bindable` is treated like a non-reactive POJO, and therefore also doesn't update the component when mutating its properties.
152+
153+
```svelte
154+
<--- file: Child.svelte --->
155+
<script>
156+
let { object = { count = 0 } } = $props();
157+
</script>
158+
<button onclick={() => {
159+
// has no effect if the fallback value is used
160+
object.count += 1
161+
}}>
162+
clicks: {object.count}
163+
</button>
164+
```
165+
166+
In general, mutating props is discouraged, instead use callback props to make it easier to reason about state and changes to that state. If parent and child should share (and be allowed to mutate) the same object, then use the [$bindable]($bindable) rune.
167+
149168
## Type safety
150169

151170
You can add type safety to your components by annotating your props, as you would with any other variable declaration. In TypeScript that might look like this...

0 commit comments

Comments
 (0)