Sharing state between framework islands in Astro - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does 'sharing state between framework islands' mean in Astro?

It means passing data or state between different UI parts built with different frameworks inside an Astro page, so they can work together smoothly.

beginner

Why is sharing state between framework islands challenging?

Because each island is its own mini app with separate JavaScript, so they don't automatically share data or updates without extra setup.

intermediate

Name one common method to share state between framework islands.

Using a global state manager or a shared event system like custom events or browser storage to communicate between islands.

intermediate

How can custom events help in sharing state between islands?

One island can dispatch a custom event with data, and another island listens for that event to update its state accordingly.

beginner

What is a practical example of sharing state between framework islands?

A shopping cart island updates when a product island adds an item, so the cart shows the new total without reloading the page.

What is a 'framework island' in Astro?

A A full Astro project

B A CSS style block

C A small UI part built with a specific framework inside an Astro page

D A server-side API

A framework island is a self-contained UI piece built with React, Vue, Svelte, etc., inside Astro.

Which of these is NOT a way to share state between islands?

A Using browser storage like localStorage

B Using global variables directly without any communication

C Dispatching and listening to custom events

D Using a shared state manager library

Global variables alone don't work well because islands run isolated scripts.

Why might you use browser storage to share state?

A To persist data and share it across islands on the same page

B To style the islands

C To load images faster

D To run server code

Browser storage like localStorage can hold data accessible by all islands on the page.

What role do custom events play in state sharing?

A They create new HTML elements

B They style the page

C They load external scripts

D They let islands send messages to each other with data

Custom events allow islands to communicate by sending and receiving data messages.

Which is a benefit of sharing state between framework islands?

A Better user experience with interactive, connected UI parts

B Slower page loads

C More server requests

D Less control over UI

Sharing state helps islands update together, making the UI feel smooth and connected.

Explain how you can share state between two different framework islands in Astro.

Think about how one island can tell another about a change.

Describe a real-life scenario where sharing state between framework islands improves user experience.

Imagine a shopping site with multiple parts updating together.