Streaming with promises in Svelte - Step-by-Step Execution

Concept Flow - Streaming with promises

Start Component

↓

Initialize Promise

↓

Render Loading State

↓

Promise Resolves

↓

Update State with Data

↓

Re-render with Data

↓

Display Final Output

This flow shows how a Svelte component starts with a promise, shows loading, then updates and renders data when the promise resolves.

Execution Sample

Svelte

let dataPromise = fetch('/api/data').then(res => res.json());

let currentData = null;

$: dataPromise.then(data => currentData = data);

This code fetches data asynchronously and updates the component state when the promise resolves.

Execution Table

Step	Action	Promise State	currentData Value	Component Rendered Output
1	Component starts, dataPromise created	Pending	null	Loading...
2	Promise pending, no data yet	Pending	null	Loading...
3	Promise resolves with data {name: 'Alice'}	Fulfilled	null	Loading...
4	Update currentData with resolved data	Fulfilled	{name: 'Alice'}	Display: Alice
5	Component re-renders with currentData	Fulfilled	{name: 'Alice'}	Display: Alice

💡 Promise fulfilled and data displayed, no further updates.

Variable Tracker

Variable	Start	After Step 1	After Step 3	After Step 4	Final
dataPromise	undefined	Pending Promise	Fulfilled Promise	Fulfilled Promise	Fulfilled Promise
currentData	null	null	null	{name: 'Alice'}	{name: 'Alice'}

Key Moments - 2 Insights

Why does the component show 'Loading...' even after the promise resolves?

Because the component only updates the displayed data after currentData changes at step 4, before that it shows the loading state as currentData is null (see execution_table rows 3 and 4).

How does Svelte know to re-render when the promise resolves?

The reactive statement ($:) watches the promise resolution and updates currentData, triggering re-render (see execution_table step 4).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of currentData at Step 3?

A undefined

B {name: 'Alice'}

C null

D Pending Promise

💡 Hint

Check the 'currentData Value' column at Step 3 in the execution_table.

At which step does the component first display the fetched data?

A Step 4

B Step 2

C Step 3

D Step 1

💡 Hint

Look at the 'Component Rendered Output' column to see when 'Display: Alice' appears.

If currentData was initialized with an empty object instead of null, how would the initial render change?

A It would still show 'Loading...'

B It would immediately display data (empty object)

C It would cause an error

D It would show nothing

💡 Hint

Refer to variable_tracker for currentData initial values and execution_table for render outputs.

Concept Snapshot

Svelte streams data by using promises.
Initialize a promise (e.g., fetch).
Use reactive statements ($:) to update state when promise resolves.
Render loading state while promise is pending.
Update and re-render component when data arrives.
This creates smooth async data streaming in UI.

Full Transcript

This visual execution shows how a Svelte component handles streaming data with promises. The component starts by creating a promise that fetches data. Initially, the promise is pending, so the component shows a loading message. When the promise resolves with data, a reactive statement updates the component's state variable currentData. This triggers a re-render, and the component displays the fetched data. The variable tracker shows how dataPromise changes from pending to fulfilled, and currentData updates from null to the fetched object. Key moments clarify why loading shows before data and how Svelte reactivity triggers updates. The quiz tests understanding of state values at each step and how initial values affect rendering.

Practice

1. What is the main benefit of using streaming with promises in Svelte when fetching data?

easy

A. It allows showing data bit by bit for faster user feedback.

B. It delays showing any data until the entire response is received.

C. It automatically caches all data without extra code.

D. It prevents any UI updates until the promise fully resolves.

Solution

1. Step 1: Understand streaming with promises

   Streaming lets you process data as it arrives, not waiting for all data.

2. Step 2: Connect streaming to user experience

   Showing data bit by bit gives faster feedback, improving user experience.

3. Final Answer:

   It allows showing data bit by bit for faster user feedback. -> Option A

4. Quick Check:

   Streaming = faster feedback [OK]

Hint: Streaming means showing data as it arrives, not waiting [OK]

Common Mistakes:

• Thinking streaming waits for full data
• Confusing streaming with caching
• Believing UI updates only after full promise resolves

2. Which of the following is the correct way to start reading chunks from a fetch response stream in Svelte?

easy

A. const reader = response.getReader();

B. const reader = response.body.getReader();

C. const reader = response.readableStream();

D. const reader = response.streamReader();

Solution

1. Step 1: Identify how to access the stream reader

   The fetch response has a body property which is a ReadableStream.

2. Step 2: Use the correct method to get the reader

   Calling getReader() on response.body returns the reader.

3. Final Answer:

   const reader = response.body.getReader(); -> Option B

4. Quick Check:

   Use response.body.getReader() [OK]

Hint: Remember: reader comes from response.body.getReader() [OK]

Common Mistakes:

• Calling getReader() directly on response
• Using non-existent methods like readableStream()
• Confusing response.body with response itself

3. Given this Svelte code snippet, what will be logged to the console?

async function fetchData() {
  const response = await fetch('/data');
  const reader = response.body.getReader();
  const { value, done } = await reader.read();
  console.log(new TextDecoder().decode(value));
}
fetchData();

medium

A. The first chunk of data from the response decoded as text.

B. The entire response body as a string.

C. An error because reader.read() returns a promise without value.

D. Undefined because value is not set.

Solution

1. Step 1: Understand reader.read() output

   reader.read() returns a promise resolving to an object with value (chunk) and done (boolean).

2. Step 2: Decode the first chunk

   The code decodes the first chunk's bytes to text and logs it.

3. Final Answer:

   The first chunk of data from the response decoded as text. -> Option A

4. Quick Check:

   reader.read() gives first chunk [OK]

Hint: reader.read() returns first chunk and done flag [OK]

Common Mistakes:

• Assuming reader.read() returns full response
• Expecting reader.read() to return undefined value
• Confusing promise with direct value

4. What is wrong with this Svelte code that tries to stream data from fetch?

async function load() {
  const response = await fetch('/api');
  const reader = response.getReader();
  while(true) {
    const { value, done } = await reader.read();
    if(done) break;
    console.log(value);
  }
}

medium

A. Using while(true) causes infinite loop.

B. Missing await before fetch call.

C. Calling getReader() directly on response instead of response.body.

D. Not decoding value before logging.

Solution

1. Step 1: Check how getReader() is called

   getReader() must be called on response.body, not on response itself.

2. Step 2: Identify the error cause

   Calling response.getReader() will cause a runtime error because response has no such method.

3. Final Answer:

   Calling getReader() directly on response instead of response.body. -> Option C

4. Quick Check:

   Use response.body.getReader() [OK]

Hint: getReader() is on response.body, not response [OK]

Common Mistakes:

• Calling getReader() on response
• Forgetting to decode chunks
• Thinking while(true) always causes infinite loop

5. You want to display a loading message that updates with each chunk of streamed data in Svelte. Which approach correctly updates the UI as chunks arrive?

hard

A. Update a local variable inside the async function without reactive binding.

B. Wait for all chunks, then update the UI once with the full data.

C. Use setTimeout to delay UI updates until streaming finishes.

D. Use a writable store to append each decoded chunk and bind it to the UI.

Solution

1. Step 1: Understand UI reactivity in Svelte

   Svelte updates the UI when reactive variables or stores change.

2. Step 2: Choose a method to update UI per chunk

   Using a writable store to append each chunk triggers UI updates as data arrives.

3. Step 3: Why other options fail

   Waiting for all chunks delays UI update; setTimeout delays unnecessarily; local variable changes without binding won't update UI.

4. Final Answer:

   Use a writable store to append each decoded chunk and bind it to the UI. -> Option D

5. Quick Check:

   Writable store + binding = live UI updates [OK]

Hint: Use writable store to update UI reactively per chunk [OK]

Common Mistakes:

• Updating local variables without reactive binding
• Waiting for full data before UI update
• Using timers instead of reactive stores