frontend-react-router-best-practices_skill

Overview

This skill documents React Router performance and architecture best practices for loaders, actions, forms, streaming, and route organization. It focuses on preventing common pitfalls (data waterfalls, improper validation, resubmission) and guiding maintainable route structure and request-scoped middleware.

How this skill works

The guidance inspects route code patterns and recommends where to place data fetches (loaders vs components), how to parallelize and cache requests per-request, and how to handle form mutations and validation using Zod and server/client actions. It also prescribes middleware patterns for per-request singletons, logging, security guards, and safe redirects to harden routes and improve observability.

When to use it

• When writing new React Router routes, loaders, or actions
• When converting component-level fetches to route loaders to avoid waterfalls
• When implementing form handling, validation, and post-mutation redirects
• When organizing route files and colocating query functions
• When adding streaming, per-request caching, or auth/authorization checks

Best practices

• Always fetch data in loaders; avoid useEffect-driven fetches in route components
• Parallelize independent requests in loaders (Promise.all) and use request-scoped caching
• Validate and sanitize form input in actions with Zod; return validation data instead of throwing
• Redirect after successful mutations to prevent form resubmission
• Use middleware for session, request IDs, batching, and server-timing measurements
• Prefer useFetcher for in-place mutations and Form for navigational submissions

Example use cases

• Converting a profile page that fetches user data in useEffect to a loader-based pattern with typed useLoaderData
• Implementing a form action that validates with Zod, returns field errors on failure, and redirects on success
• Adding request-scoped API batching and singletons via middleware to dedupe DB calls
• Using useFetcher for a like button to avoid navigation and showing pending state with useSpinDelay
• Colocating server queries in queries.server.ts and calling them from route loaders for clearer ownership