Sharing state between framework islands in Astro - Step-by-Step Execution

Concept Flow - Sharing state between framework islands

User interacts with Island A

↓

Island A updates local state

↓

State serialized to shared storage

↓

Island B reads shared state

↓

Island B updates UI based on shared state

User actions in one island update local state, which is saved to shared storage. Other islands read this shared state to stay in sync.

Execution Sample

Astro

let sharedState = { count: 0 };

// Island A increments count
function increment() {
  sharedState.count++;
  updateIslandB();
}

Island A increments a shared count and triggers Island B to update using the shared state.

Execution Table

Step	Action	Island A State	Shared State	Island B State	UI Update
1	Initial load	count=0	count=0	count=0	Both islands show 0
2	User clicks increment on Island A	count=1	count=1	count=0	Island A shows 1, Island B still 0
3	Island B reads shared state	count=1	count=1	count=1	Island B updates UI to 1
4	User clicks increment on Island A again	count=2	count=2	count=1	Island A shows 2, Island B still 1
5	Island B reads shared state again	count=2	count=2	count=2	Island B updates UI to 2
6	No further actions	count=2	count=2	count=2	UI stable showing 2

💡 No more user actions; shared state and islands are synchronized.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	Final
Island A count	0	1	1	2	2	2
Shared count	0	1	1	2	2	2
Island B count	0	0	1	1	2	2

Key Moments - 2 Insights

Why does Island B not update immediately when Island A changes the count?

Because Island B only updates its UI after reading the shared state explicitly, as shown in steps 2 and 3 of the execution table.

How does the shared state keep islands in sync?

Island A writes changes to the shared state, and Island B reads from it to update its own state, shown in steps 2-5.

Visual Quiz - 3 Questions

Look at the execution table, what is Island B's count after step 3?

A 2

B 0

C 1

D Undefined

💡 Hint

Check the 'Island B State' column at step 3 in the execution table.

At which step does Island A update the shared state to 2?

A Step 2

B Step 4

C Step 3

D Step 5

💡 Hint

Look at the 'Shared State' column in the execution table to see when count becomes 2.

If Island B never reads the shared state, what happens to its UI?

A It stays outdated

B It resets to zero

C It updates automatically

D It crashes

💡 Hint

Refer to the variable_tracker showing Island B count changes only after reading shared state.

Concept Snapshot

Sharing state between framework islands:
- Each island manages local state.
- Shared state acts as a bridge.
- Islands write/read shared state to sync.
- UI updates only after reading shared state.
- Enables coordination without direct communication.

Full Transcript

Sharing state between framework islands means that each island has its own local state but can keep in sync by using a shared state object. When a user interacts with one island, it updates its local state and writes the change to the shared state. Other islands read this shared state to update their own local state and UI. This process happens step-by-step: user action triggers local update, local update writes to shared state, other islands read shared state, and then update their UI. This way, islands stay coordinated without directly talking to each other. The execution table shows how the count variable changes in Island A, the shared state, and Island B over several steps. Key moments include understanding why Island B updates only after reading shared state and how shared state keeps islands synchronized. The visual quiz tests understanding of these steps and the importance of reading shared state for UI updates.