react-typescript_skill

Overview

This skill documents modern React 19+ patterns with TypeScript for building robust frontend applications. It covers typed function components, hooks, state management, TanStack Query integration, Zod form validation, error boundaries, React 19 features (use, actions), and performance optimizations. Use it to standardize component design and data flows in TypeScript React projects.

How this skill works

The skill describes concrete patterns and small, typed examples you can copy into a project: function and generic components, custom hooks, context and Zustand stores, TanStack Query queries and optimistic mutations, and React Hook Form + Zod setups. It also explains React 19-specific features (use, actions, useOptimistic) and compiler-friendly practices to help the React compiler optimize your code. Usage notes include file structure recommendations, type definitions, and performance techniques such as memoization and code splitting.

When to use it

• Starting a new React 19+ app with TypeScript and needing consistent patterns
• Implementing typed components, generic lists, or compound components
• Integrating data fetching and caching with TanStack Query
• Building forms with validation using React Hook Form and Zod
• Adding global state with Context or Zustand and safe typed hooks
• Optimizing performance and adopting React 19 compiler guidance

Best practices

• Keep components pure and props serializable to enable compiler optimizations
• Prefer typed hooks and return shapes (data, loading, error, refetch) for consistency
• Use TanStack Query for caching and optimistic updates; separate concerns between actions and mutations
• Validate and infer types with Zod and wire resolver into React Hook Form
• Memoize expensive computations and callbacks with useMemo/useCallback; memoize components with memo
• Organize code by feature: components, hooks, stores, services, types, and utils

Example use cases

• Typed UserCard and Container components for a user management UI
• useFetch and custom counter hooks for isolated logic and testing
• AuthProvider with useAuth hook for centralized authentication state
• useUser query and useUpdateUser mutation for profile pages with optimistic updates
• UserForm using React Hook Form + Zod for client-side validation and typed submission
• Lazy-loaded admin panel with Suspense and compiler-friendly component patterns