skills.rest
gileck
gileckCOMMUNITY
Explore all skills by this author →
GitHub

react-hook-organization

Standardize React Query and Zustand hook organization in Next.js projects.

Updated Mar 28, 2025
Search Tags:#react#hooks#offline#organize#zustand#react-query
One-click install
npx skills add https://github.com/gileck/app-template-ai --skill react-hook-organization
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-hook-organization
Source: https://github.com/gileck/app-template-ai/tree/main/.ai/skills/template/react-hook-organization
Command: npx skills add https://github.com/gileck/app-template-ai --skill react-hook-organization

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about react-hook-organization

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I organize React Query and Zustand hooks in Next.js projects?▼

You organize React Query and Zustand hooks by colocating route-specific hooks in a hooks.ts file within each route folder to keep data logic close to UI components.

What's the best way to structure query keys for React Query cache invalidation?▼

The best way to structure query keys is to export stable, type-safe query keys from your colocated hooks modules, ensuring predictable and consistent cache invalidation across the application.

How do I handle offline mutations with React Query and Zustand?▼

Handle offline mutations by designing mutation hooks to manage empty responses in offline scenarios and support optimistic updates, ensuring data syncs seamlessly when connectivity returns.

Can I separate query and mutation logic when using React Query with Zustand?▼

Yes, you can separate query and mutation logic by placing route-specific data fetching and client state patterns in dedicated modules, establishing a clear boundary between fetching and modifying data.

Where should I put shared authentication hooks in a Next.js app?▼

Place shared authentication and user data hooks in centralized feature folders rather than route folders, allowing reuse of cross-cutting hooks across multiple routes in your Next.js application.

How do I configure React Query defaults to avoid repeated configuration?▼

Configure React Query defaults by using a shared defaults module to centralize behavior settings, preventing boilerplate and ensuring consistent configuration across all query and mutation hooks.

Related Skills

Explore More Software Engineering Skills→
AngelP17AngelP17
1

react-state-management

Implement React state management patterns with Redux Toolkit, Zustand, Jotai, and React Query.

Community
Intermediate
vecearvecear

tanstack-query-setup

Configure TanStack Query with QueryClient, provider, and typed hooks.

Community
Advanced
jcsoftdevjcsoftdev

hoc-pattern

Reuse cross-cutting component logic across React components with higher-order components.

Community
Advanced
datamktkoreadatamktkorea

react-state-orchestration

Design React/Next.js state management with React Query and Zustand.

Official
Advanced