reactFull React 19 engineering, architecture, Server Components, hooks, Zustand, TanStack Query, forms, performance, testing, production deploy.
Install via ClawdBot CLI:
clawdbot install ivangdavila/reactProduction-grade React engineering. This skill transforms how you build React applications ā from component architecture to deployment.
Before writing code, make these decisions:
| Decision | Options | Default |
|----------|---------|---------|
| Rendering | SPA / SSR / Static / Hybrid | SSR (Next.js) |
| State (server) | TanStack Query / SWR / use() | TanStack Query |
| State (client) | useState / Zustand / Jotai | Zustand if shared |
| Styling | Tailwind / CSS Modules / styled | Tailwind |
| Forms | React Hook Form + Zod / native | RHF + Zod |
Rule: Server state (API data) and client state (UI state) are DIFFERENT. Never mix them.
// ā
The correct pattern
export function UserCard({ user, onEdit }: UserCardProps) {
// 1. Hooks first (always)
const [isOpen, setIsOpen] = useState(false)
// 2. Derived state (NO useEffect for this)
const fullName = `${user.firstName} ${user.lastName}`
// 3. Handlers
const handleEdit = useCallback(() => onEdit(user.id), [onEdit, user.id])
// 4. Early returns
if (!user) return null
// 5. JSX (max 50 lines)
return (...)
}| Rule | Why |
|------|-----|
| Named exports only | Refactoring safety, IDE support |
| Props interface exported | Reusable, documented |
| Max 50 lines JSX | Extract if bigger |
| Max 300 lines file | Split into components |
| Hooks at top | React rules + predictable |
Is it from an API?
āā YES ā TanStack Query (NOT Redux, NOT Zustand)
āā NO ā Is it shared across components?
āā YES ā Zustand (simple) or Context (if rarely changes)
āā NO ā useState// Query key factory ā prevents key typos
export const userKeys = {
all: ['users'] as const,
detail: (id: string) => [...userKeys.all, id] as const,
}
export function useUser(id: string) {
return useQuery({
queryKey: userKeys.detail(id),
queryFn: () => fetchUser(id),
staleTime: 5 * 60 * 1000, // 5 min
})
}// Thin stores, one concern each
export const useUIStore = create<UIState>()((set) => ({
sidebarOpen: true,
toggleSidebar: () => set((s) => ({ sidebarOpen: !s.sidebarOpen })),
}))
// ALWAYS use selectors ā prevents unnecessary rerenders
const isOpen = useUIStore((s) => s.sidebarOpen)// Server Component ā runs on server, zero JS to client
async function ProductList() {
const products = await db.products.findMany() // Direct DB access
return <ul>{products.map(p => <ProductCard key={p.id} product={p} />)}</ul>
}
// Client Component ā needs 'use client' directive
'use client'
function AddToCartButton({ productId }: { productId: string }) {
const [loading, setLoading] = useState(false)
return <button onClick={() => addToCart(productId)}>Add</button>
}| Server Component | Client Component |
|------------------|------------------|
| async/await ā | useState ā |
| Direct DB ā | onClick ā |
| No bundle size | Adds to bundle |
| useState ā | async ā |
// Read promises in render (with Suspense)
function Comments({ promise }: { promise: Promise<Comment[]> }) {
const comments = use(promise) // Suspends until resolved
return <ul>{comments.map(c => <li key={c.id}>{c.text}</li>)}</ul>
}'use client'
async function submitAction(prev: State, formData: FormData) {
'use server'
// ... server logic
return { success: true }
}
function Form() {
const [state, action, pending] = useActionState(submitAction, {})
return (
<form action={action}>
<input name="email" disabled={pending} />
<button disabled={pending}>{pending ? 'Saving...' : 'Save'}</button>
{state.error && <p>{state.error}</p>}
</form>
)
}| Priority | Technique | Impact |
|----------|-----------|--------|
| P0 | Route-based code splitting | š“ High |
| P0 | Image optimization (next/image) | š“ High |
| P1 | Virtualize long lists (tanstack-virtual) | š” Medium |
| P1 | Debounce expensive operations | š” Medium |
| P2 | React.memo on expensive components | š¢ Low-Med |
| P2 | useMemo for expensive calculations | š¢ Low-Med |
React Compiler (React 19+): Auto-memoizes. Remove manual memo/useMemo/useCallback.
// ā Renders "0" when count is 0
{count && <Component />}
// ā
Explicit boolean
{count > 0 && <Component />}// ā Mutating state ā React won't detect
array.push(item)
setArray(array)
// ā
New reference
setArray([...array, item])// ā New key every render ā destroys component
<Item key={Math.random()} />
// ā
Stable key
<Item key={item.id} />// ā useEffect cannot be async
useEffect(async () => { ... }, [])
// ā
Define async inside
useEffect(() => {
async function load() { ... }
load()
}, [])// ā Missing cleanup ā memory leak
useEffect(() => {
const sub = subscribe()
}, [])
// ā
Return cleanup
useEffect(() => {
const sub = subscribe()
return () => sub.unsubscribe()
}, [])// ā Object in deps ā triggers every render
useEffect(() => { ... }, [{ id: 1 }])
// ā
Extract primitives or memoize
useEffect(() => { ... }, [id])// ā Sequential fetches ā slow
const users = await fetchUsers()
const orders = await fetchOrders()
// ā
Parallel
const [users, orders] = await Promise.all([fetchUsers(), fetchOrders()])// ā Race condition ā no abort
useEffect(() => {
fetch(url).then(setData)
}, [url])
// ā
Abort controller
useEffect(() => {
const controller = new AbortController()
fetch(url, { signal: controller.signal }).then(setData)
return () => controller.abort()
}, [url])Common errors AI assistants make with React:
| Mistake | Correct Pattern |
|---------|-----------------|
| useEffect for derived state | Compute inline: const x = a + b |
| Redux for API data | TanStack Query for server state |
| Default exports | Named exports: export function X |
| Index as key in dynamic lists | Stable IDs: key={item.id} |
| Fetching in useEffect | TanStack Query or loader patterns |
| Giant components (500+ lines) | Split at 50 lines JSX, 300 lines file |
| No error boundaries | Add at app, feature, component level |
| Ignoring TypeScript strict | Enable strict: true, fix all errors |
| Hook | Purpose |
|------|---------|
| useState | Local state |
| useEffect | Side effects (subscriptions, DOM) |
| useCallback | Stable function reference |
| useMemo | Expensive calculation |
| useRef | Mutable ref, DOM access |
| use() | Read promise/context (React 19) |
| useActionState | Form action state (React 19) |
| useOptimistic | Optimistic UI (React 19) |
src/
āāā app/ # Routes (Next.js)
āāā features/ # Feature modules
ā āāā auth/
ā āāā components/ # Feature components
ā āāā hooks/ # Feature hooks
ā āāā api/ # API calls
ā āāā index.ts # Public exports
āāā shared/ # Cross-feature
ā āāā components/ui/ # Button, Input, etc.
ā āāā hooks/ # useDebounce, etc.
āāā providers/ # Context providersSee setup.md for first-time configuration. Uses memory-template.md for project tracking.
export function X not export default. Enables safe refactoring.const total = items.reduce(...). Effects are for side effects.item.id, never index for dynamic lists.any, no implicit nulls. Catch bugs at compile time.Install with clawhub install if user confirms:
clawhub star reactclawhub syncGenerated Mar 1, 2026
Building a server-rendered product catalog using React 19 Server Components to fetch data directly from a database, with client-side interactivity for filtering and adding items to cart. Uses TanStack Query for server state and Zustand for shared UI state like cart management, optimizing performance with code splitting and image optimization.
Developing a dashboard with dynamic charts and tables that update in real-time via WebSockets, using React hooks for state management and TanStack Query for API data caching. Implements virtualized lists for handling large datasets and debouncing for expensive operations to ensure smooth user interactions.
Creating a secure patient portal with forms for appointment booking and medical history viewing, using React Hook Form with Zod for validation and React 19's useActionState for server-side form handling. Ensures performance with route-based code splitting and adheres to component rules for maintainability.
Implementing an infinite-scrolling feed using React 19 Server Components for initial data loading and client components for interactions like liking and commenting. Leverages TanStack Query for paginated data fetching and Zustand for managing user session state, with performance optimizations like memoization and image lazy loading.
Building an admin panel with CRUD operations for user management, using React 19 for hybrid rendering with SSR for SEO and client-side state for UI controls. Employs TanStack Query for API state and Zustand for shared settings, following architecture decisions for scalable folder structure and component extraction.
Offering a React-based application with tiered subscription plans for features like advanced analytics or custom integrations. Revenue is generated through monthly or annual fees, leveraging React's performance optimizations to handle high user loads and ensure uptime.
Operating a platform where third-party sellers list products, with revenue from transaction fees, commissions, or premium seller subscriptions. Uses React for a fast, responsive frontend with server components for product data and client components for checkout processes.
Providing bespoke React development services for clients across industries, with revenue from project-based contracts or retainer fees. Leverages the skill's architecture and performance guidelines to deliver high-quality, maintainable applications efficiently.
š¬ Integration Tip
Integrate this skill by first setting up the architecture decisions like rendering mode and state management, then apply component rules and performance techniques to build scalable applications.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
Use when building UI with shadcn/ui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui ā no mockups needed. Generates bold, memorable designs from plain text requirements with anti-AI-slop aesthetics, mobile-first responsive patterns, and single-file bundling. Use when building landing pages, marketing sites, portfolios, dashboards, or any static web UI. Supports both Vite (pure static) and Next.js (Vercel deploy) workflows.
AI skill for automated UI audits. Evaluate interfaces against proven UX principles for visual hierarchy, accessibility, cognitive load, navigation, and more. Based on Making UX Decisions by Tommy Geoco.