Skip to main content
The settled() function returns a promise that resolves when all pending effects have finished executing. This is useful when you need to wait for the reactive system to fully settle before proceeding.

​
Import

import { settled } from 'svelte';

​
Signature

function settled(): Promise<void>;

​
Returns

​
Promise<void>
Promise<void>
A promise that resolves when all pending effects have completed

​
Usage

​
Waiting for effects to complete

<script>
  import { settled } from 'svelte';

  let count = $state(0);

  $effect(() => {
    console.log('Effect running:', count);
  });

  async function updateAndWait() {
    count++;
    
    // Wait for the effect to run
    await settled();
    
    console.log('Effect has completed');
  }
</script>

<button onclick={updateAndWait}>Update</button>

​
Testing

import { mount, settled } from 'svelte';
import { test } from 'vitest';
import Component from './Component.svelte';

test('effects complete', async () => {
  const component = mount(Component, { target: document.body });
  
  // Trigger some state changes
  component.updateState();
  
  // Wait for all effects to complete
  await settled();
  
  // Now we can safely assert on the final state
  expect(component.finalValue).toBe(42);
});

​
Chaining operations

<script>
  import { settled } from 'svelte';

  let data = $state(null);
  let processed = $state(null);

  $effect(() => {
    if (data) {
      processed = processData(data);
    }
  });

  async function loadAndProcess() {
    data = await fetchData();
    
    // Wait for the effect to process the data
    await settled();
    
    // Now processed is guaranteed to be updated
    console.log('Processed:', processed);
  }
</script>

​
Notes

  • Similar to tick() but waits for all effects, not just DOM updates
  • Useful in testing scenarios
  • Guarantees all reactive computations have completed
  • Different from flushSync() which runs synchronously

​
See also