react-typescript-development
Master React 19 and TypeScript 5 component development with production-ready patterns for Ant Design, TanStack Query state management, and Tauri desktop apps. Learn Hooks best practices, form validation, performance optimization with React.memo and useCallback, and type-safe command integration without sacrificing developer experience.
React TypeScript Development helps you build type-safe React 19 components with TypeScript 5, Ant Design, and Tauri integration.
AI-generated summary based on this skill's SKILL.md
Install
cacr92/WeReply/react-typescript-development · repository language: Python
git clone https://github.com/cacr92/WeReply
cp -r WeReply/.claude/skills/react-typescript-development ~/.claude/skills/react-typescript-developmentFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I use TanStack Query with React?
react-typescript-development teaches TanStack Query integration for robust state management. Use useQuery for data fetching with automatic caching, background refetching, and error handling. Pair it with useMutation for server updates. TanStack Query handles loading/error states declaratively, reducing boilerplate compared to useState + useEffect patterns. Combine with TypeScript generics to type query results and mutation variables for full type safety across your data layer.
What are React hooks best practices for useMemo and useCallback?
react-typescript-development covers hooks optimization to prevent unnecessary re-renders. Use useCallback to memoize event handlers passed to child components—wrap the function and list dependencies that trigger recreation. Use useMemo for expensive computations, but avoid over-memoizing simple operations since memoization itself has overhead. Always include accurate dependency arrays; missing dependencies cause stale closures and bugs. Profile with React DevTools Profiler before optimizing to identify real bottlenecks.
How do I build type-safe React components with TypeScript and Ant Design?
react-typescript-development emphasizes avoiding 'as any' casts. Define component props with strict interfaces, leveraging Ant Design's exported types like FormInstance and ButtonProps. Use React.FC<Props> or function signatures for components. For Ant Design forms, type the form instance and field values explicitly. Enable strict mode in tsconfig.json. Import component types from 'antd' directly—this catches prop mismatches at compile time and enables IDE autocomplete for all Ant Design configuration options.
What's the best way to integrate Tauri desktop apps with type-safe frontend commands?
react-typescript-development covers Tauri command bindings for type safety. Use Tauri's code generation to auto-generate TypeScript types from your Rust backend commands. Import generated types and invoke commands with full type checking on arguments and return values. Avoid string-based command names; use the generated functions instead. Combine with TanStack Query's useQuery to handle async command results, loading states, and error handling uniformly across your desktop UI.
How can I optimize React component performance using memo and callbacks?
react-typescript-development teaches performance patterns for production apps. Wrap components with React.memo to skip re-renders when props haven't changed. Memoize callbacks with useCallback so child components receive stable function references. For lists, always provide stable keys—never use array indices. Profile before optimizing; unnecessary memoization adds complexity. Combine memo + useCallback + useMemo strategically in data-heavy components or when rendering large lists with Ant Design tables.
What common React pitfalls should I avoid in TypeScript development?
react-typescript-development highlights best practices to sidestep bugs. Never violate Rules of Hooks—call them only at the top level of components or custom hooks, not conditionally. Ensure dependency arrays in useEffect are complete and accurate. Avoid stale closures by including all external values in dependencies. Don't mutate state directly; use setState. Use TypeScript strict mode to catch type errors early. Test components with Testing Library to verify behavior, not implementation details.
SKILL.md
rendered from the published skill — quoted content, verbatim
React TypeScript Development Skill
Expert guidance for React 19 + TypeScript 5 + Ant Design + Tauri frontend development.
Component Development
Functional Component Pattern
```typescript import React, { useState, useCallback } from 'react'; import { Button, Form, Input, message } from 'antd'; import type { FormProps } from 'antd';
interface MyComponentProps { initialValue?: string; onSave: (value: string) => Promise<void>; }
export const MyComponent: React.FC<MyComponentProps> = ({ initialValue, onSave, }) => { const [form] = Form.useForm(); const [loading, setLoading] = useState(false);
const handleSubmit = useCallback(async (values: any) => { try { setLoading(true); await
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 2 files
.claude/skills/react-typescript-development/SKILL.md
.claude/skills/react-typescript-development/skill.json