WindsurfReactArchitecture

React Windsurf Rules

Windsurf rules for React: modern patterns, performance, and scalable React architecture.

.windsurfrules

- Use Tanstack Query v5 for all server state; local state with zustand or jotai
- Implement virtualization (TanStack Virtual) for lists over 100 items
- Use React 19 use() hook for async data in components
- Apply the Container/Presentational pattern for separation of concerns
- Use React Compiler (in React 19) to eliminate manual memo optimization
- Write tests with React Testing Library; use MSW for API mocking
- Use startTransition for non-urgent state updates to keep UI responsive
- Implement error boundaries at feature level, not just the app root

How to use with Windsurf

Create a `.windsurfrules` file in your project root. Windsurf's Cascade AI applies these rules automatically.

← All Windsurf rules All React rules →

#react#windsurf#tanstack-query#coding-rules

Related Rules

TypeScript Windsurf Rules

WindsurfTypeScript

Windsurf rules for TypeScript: strict type safety, functional patterns, and modern TypeScript conventions.

Code Style

typescript · windsurfCopy Ready

Go Windsurf Rules

WindsurfGo

Windsurf rules for Go: hexagonal architecture, clean code, observability, and production Go patterns.

Architecture

go · windsurfCopy Ready

Rust Windsurf Rules

WindsurfRust

Windsurf rules for Rust: async Rust, WASM, systems programming, and production Rust patterns.

Architecture

rust · windsurfCopy Ready

Docker Windsurf Rules

WindsurfDocker

Windsurf rules for Docker and container architecture: compose patterns, registries, and microservice conventions.

Architecture

docker · windsurfCopy Ready