Optimization for Large Datasets via $state.raw

Snippet

Optimization for Large Datasets via $state.raw

$state.raw creates a shallow reactive state. Unlike standard $state, it does not turn objects into proxies. This is critical for performance when handling thousands of entries, as it avoids the overhead of deep observation.

snippet.js
javascript
<script>
  let items = $state.raw([]); 
 
  function bulkUpdate(newData) {
    // Bypasses deep reactivity for massive performance gains
    items = [...items, ...newData];
  }
</script>
 
<ul>
  {#each items as item (item.id)}
    <li>{item.label}</li>
  {/each}
</ul>

svelte

Breakdown

let items = $state.raw([]);

Initializes a shallow reactive array that only triggers updates on assignment.

items = [...items, ...newData];

Reassignment is necessary to trigger the UI update since inner mutations are not tracked.

{#each items as item (item.id)}

Using a key (item.id) is best practice for efficient list reconciliation in Svelte.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Optimization for Large Datasets via $state.raw

Related