react-hook-organization

What problem does it solve?

This pattern standardizes how route-specific and feature-level hooks are organized in a React + React Query + Zustand codebase. It promotes colocated logic, consistent query keys, and predictable data flow, reducing boilerplate and improving maintainability in data-heavy applications.

Core Features & Use Cases

• Colocated hooks: Place route-specific hooks in a hooks.ts file within each route folder to keep data logic close to UI components.
• Centralized defaults: Use a shared defaults module to configure React Query behavior to avoid repeated configuration.
• Offline-first mutations: Design mutation hooks to handle empty responses in offline scenarios and support optimistic updates.
• Query keys conventions: Export stable, type-safe query keys for predictable cache invalidation.
• Cross-cutting hooks: Centralize shared hooks (e.g., authentication, user data) in feature folders for reuse across routes.

Quick Start

1. Create a route folder with a hooks.ts containing your query and mutation hooks.
2. Export and reuse query keys across the app to ensure consistency.
3. Follow the colocated pattern for new features to keep your data layer scalable and predictable.