Sharing state between framework islands in Astro - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does state sharing affect component updates?

In Astro, when two framework islands share state via a global store, what happens when the state changes?

A All islands subscribed to the shared state re-render automatically.

B Only the island that triggered the state change re-renders.

C No islands re-render until the page is refreshed manually.

D Only islands with local state re-render, ignoring the shared state.

💡 Hint

Think about how reactive state management works across components.

When multiple islands subscribe to a shared state, any change triggers all subscribed islands to update, keeping UI in sync.

📝 Syntax

intermediate

Identify the correct way to pass shared state between Astro islands

Which code snippet correctly passes a shared state object from Astro to two different framework islands?

A <IslandA client:load state={sharedState} /><IslandB client:load sharedState={sharedState} />

B <IslandA client:load sharedState={sharedState} /><IslandB client:load sharedState={sharedState} />

C <IslandA client:load state={sharedState} /><IslandB client:load state={sharedState} />

D <IslandA client:load state={sharedState} /><IslandB client:load state={sharedState} sharedState={sharedState} />

💡 Hint

Look for consistent prop names passed to both islands.

Passing the same prop name 'state' with the shared state object to both islands ensures they receive the same data.

🔧 Debug

advanced

Why does the second island not update when shared state changes?

Given two Astro islands sharing a state object, the first island updates correctly, but the second does not reflect changes. What is the most likely cause?

A Astro does not support state sharing between islands.

B The shared state object is immutable and cannot trigger updates.

C The first island overwrites the shared state with a local copy.

D The second island is not subscribed to the shared state changes properly.

💡 Hint

Consider how subscriptions to reactive state work.

If an island does not subscribe or listen to changes in the shared state, it will not update when the state changes.

🧠 Conceptual

advanced

What is the best practice for sharing state between framework islands in Astro?

Which approach best ensures consistent and reactive state sharing between multiple framework islands in Astro?

A Use a global reactive store or context accessible by all islands.

B Pass state only once during initial render and avoid updates.

C Duplicate state in each island to prevent cross-dependencies.

D Use URL query parameters to share state between islands.

💡 Hint

Think about how to keep multiple components in sync reactively.

A global reactive store or context allows all islands to read and update shared state, triggering updates where needed.

❓ state_output

expert

What is the output after updating shared state in two Astro islands?

Consider two Astro islands sharing a reactive state object with a counter starting at 0. Island A increments the counter by 1, and Island B increments it by 2. What is the final counter value after both updates?

Astro

const sharedState = reactive({ counter: 0 });

// Island A code
sharedState.counter += 1;

// Island B code
sharedState.counter += 2;

console.log(sharedState.counter);

A 0

B 3

C 2

D 1

💡 Hint

Remember that both increments affect the same shared state object.

Starting from 0, Island A adds 1 (total 1), then Island B adds 2 (total 3). The final value is 3.