Development
Playground — React
Challenge: The team wants calculators and workflows, but a full app rewrite feels too heavy
Impact: Mostly static pages >> low engagement >> weaker conversion >> higher CAC, slower growth
Goal: Rich UI only where it earns its cost—without a single-page-app rewrite.
Solution: Multi-page Astro host; React islands only on the routes that need them.
Tech: Astro, React islands, Tailwind.
Potential Applications: Calculators, product configurators, support wizards, filters and carts, internal tools surfaced on the marketing site.
👇 Click buttons below to navigate.
Local state, UI toggles, and a reducer-driven cart illustrate how React handles user input inside an island without owning the entire document.
useState · event handlers
0
Ship HTML by default and hydrate only the interactive widgets you need.
useReducer · event batching pattern
Total line items: 0
Why this matters in Astro
Static HTML still delivers the surrounding layout. React only activates for these widgets, so you keep fast first paint while retaining rich interactivity where it counts.
Controlled components coordinate input state in React. handleSubmit demonstrates the classic preventDefault pattern for client-side workflows.
Side effects subscribe to timers, the window object, and document metadata. Each effect returns a cleanup function to avoid leaks when the island unmounts or dependencies change.
useEffect · intervals · cleanup
4:25:45 AM
useEffect · document.title · cleanup restore
Watch the browser tab title update while you type. Leaving the page restores the previous title.
useEffect · window listeners · cleanup
… innerWidth
Resize the window to see updates.
Stable keys help React reconcile lists. The fake fetch demo shows loading placeholders and a guarded async flow similar to data fetching in larger apps.
Lists · keys · derived filtering (useMemo)
- Astrometa
- Reactui
- Tailwind CSSstyle
- Vitebuild
- TypeScripttypes
- ESLintquality
Immutable updates · list keys · toggles
- Read Astro docs on islands
- Try client:visible for below-the-fold widgets
Async data · loading UI · abort guard
Branching UI and ARIA roles for tabs show how islands can own accessible widgets while the Astro shell remains static.
Conditional UI · tab state · aria
Imperative focus via refs and useMemo for expensive calculations demonstrate escape hatches that stay localized to a single island.
useRef · imperative focus
useMemo · expensive derived values
fib(28) = 317811
Bumping “Re-render” recomputes the component but not fib(n) unless n changes.
createContext shares styling toggles to nested badge components. Everything here still hydrates as one island, mirroring how you’d scope React context in a larger widget.
createContext · useContext · nested consumers