Patterns for building reactive apps including subscription management, optimistic updates, cache behavior, and paginated queries with cursor-based loading

Convex Realtime Build reactive applications with Convex's real time subscriptions, optimistic updates, intelligent caching, and cursor based pagination. Documentation Sources Before implementing, do not assume; fetch the latest documentation: Primary: https://docs.convex.dev/client/react Optimistic Updates: https://docs.convex.dev/client/react/optimistic updates Pagination: https://docs.convex.dev/database/pagination For broader context: https://docs.convex.dev/llms.txt Instructions How Convex Realtime Works 1. Automatic Subscriptions useQuery creates a subscription that updates automatically 2. Smart Caching Query results are cached and shared across components 3. Consistency All subscriptions see a consistent view of the database 4. Efficient Updates Only re renders when relevant data changes Basic Subscriptions Conditional Queries Mutations with Real time Updates Optimistic Updates Show changes immediately before server confirmation: Optimistic Updates for Lists Cursor Based Pagination Infinite Scroll Pattern Multiple Subscriptions Examples Real time Chat Application Best Practices Never run npx convex deploy unless explicitly instructed Never run any git commands unless explicitly instructed Use "skip" for conditional queries instead of conditionally calling hooks Implement optimistic updates for better perceived performance Use usePaginatedQuery for large datasets Handle undefined state (loading) explicitly Avoid unnecessary re renders by memoizing derived data Common Pitfalls 1. Conditional hook calls Use "skip" instead of if statements 2. Not handling loading state Always check for undefined 3. Missing optimistic update rollback Optimistic updates auto rollback on error 4. Over fetching with pagination Use appropriate page sizes 5. Ignoring subscription cleanup React handles this automatically References Convex Documentation: https://docs.convex.dev/ Convex LLMs.txt: https://docs.convex.dev/llms.txt React Client: https://docs.convex.dev/client/react Optimistic Updates: https://docs.convex.dev/client/react/optimistic updates Pagination: https://docs.convex.dev/database/pagination

convex-realtime