Svelte child component props doesn't update on parent state change

Question

Parent component:

<script>
    import Child from "./Child.svelte"
    import { onMount } from "svelte";
    import apireq from "./api.js";
    
    let items = $state.raw([]);

    let splitItems = $derived(items.splice(0, 5));

    onMount(() => {
        apireq().then(v => items = v)
    })
</script>
<h1>item count in parent {items.length}</h1>
<Child items={splitItems} />

Child component

<script>
  let props = $props();
  let { items} = props;
</script>

item count in child:
<div>{items.length}</div>

Child component does not update after the api request.. Still shows 0 count Parent does update.

I tried with both $state and $state.raw. But i don't want full reactivity because its a large array, and reactivity on assign should be enough

This used to be so simple in svelte 4, but in 5 nothing works as expected :(

Answer 1

You need $derived or just destructure $props() directly:

let props = $props();
let { items } = $derived(props);

// or

let { items } = $props();

(Also, using splice to remove items from $state in $derived violates purity. One should not modify state in $derived.)