loom-react

# React SPA Development ## Overview Client-side React 19+ SPAs. Stack: **React Router v7** (routing/loaders), **Jotai** (atomic global state), **Vite** (build), **Bun** (package manager/runtime). NOT for SSR frameworks (Next.js/Remix) — those are out of scope. The single densest section is **Expert Practices** at the end — read it first if you know React basics. The middle sections are reference implementations. ## React 19 Features ### Actions and useActionState React 19 introduces Actions for handling async state transitions: ```typescript import { useActionState } from 'react' interface FormState { message: string error?: string } async function updateProfile(previousState: FormState, formData: FormData) { const name = formData.get('name') as string try { await fetch('/api/profile', { method: 'POST', body: JSON.stringify({ name }), }) return { message: 'Profile updated successfully' } } catch (error) { return { message: '', error: 'Update failed' } } } export function ProfileForm() { const [state, formAction, isPending] = useActionState(updateProfile, { message: '' }) return ( <form action={formAction}> <input type="text" name="name" disabled={isPending} /> <button type="submit" disabled={isPending}> {isPending ? 'Updating...' : 'Update Profile'} </button> {state.error && <p className="error">{state.error}</p>} {state.message && <p className="success">{state.message}</p>} ...