Islands & Interactivity — Chapter Quiz

Question 1

1

A React component dropped into an Astro page without a client:* directive ships zero JavaScript.

TTrueFFalse

Without a directive, the component renders as static HTML on the server — no JS shipped. The directive is what opts INTO hydration.

Question 2

2

For a widget far below the fold, the most efficient directive is…

Aclient:loadBclient:idleCclient:visibleDclient:only

client:visible waits until the user scrolls the component into view. If they never reach it, no JS for it ships.

Question 3

3

When MUST you use client:only?

AWhen the component crashes during server render (uses window, etc.)BWhen the component has stateCAlways for React componentsDNever — client:load is enough

client:only skips server rendering entirely. Required for components that depend on browser APIs during render — and a good escape hatch for buggy SSR.

Question 4

4

How do you add React support to an Astro project?

AIt's built in — just write .tsx filesBnpx astro add reactCAdd react to package.json manuallyDAstro doesn't support React

astro add installs the integration and updates astro.config.mjs. After that, .tsx / .jsx files Just Work.

Question 5

5

Functions can be passed as props to a hydrated island.

TTrueFFalse

Props are serialized to JSON for transmission to the client. Functions don't survive. Define handlers inside the island.

Question 6

6

A plain <script> tag inside an .astro file is…

ABundled by Vite with TS and importsBShipped as-is, untouchedCIgnored at build timeDRun only during SSR

Astro processes <script> blocks through Vite — TS works, imports work, dedup across components, proper module tag. Use is:inline to skip processing.

Question 7

7

Two islands need to share state. The idiomatic choice is…

AUse React Context across themBA small shared store (e.g., nanostores) plus the matching subscription hook per frameworkCPut the state on windowDIt's impossible — each island is independent

Islands are independent roots — they don't share framework context. A framework-agnostic store (nanostores) is the idiomatic way to share.

Question 8

8

To hydrate as soon as the browser is idle, use client:______.

client:idle uses requestIdleCallback to defer hydration until the main thread has nothing better to do.

Test what you learned.