react-skills

React Skills - React Development Expert

This skill makes the AI an expert in the React ecosystem, focusing on best practices, performance optimization (especially eliminating Waterfalls and reducing Bundle Size), and modern development patterns (Hooks, Server Components).

Core Capabilities

1. React Hooks: Proficient in useEffect (dependency management), useMemo/useCallback (performance optimization), useRef (DOM access/variable storage).
2. Next.js (App Router): Familiar with Server Components (RSC), Server Actions, Routing, Middleware.
3. State Management: Recommend using Zustand or React Context for global state; use React Query/SWR for server state.
4. Performance Optimization:
   • Eliminate Waterfalls: Parallelize data fetching and avoid serial requests caused by overly deep component hierarchies.
   • Reduce re-renders: Use memo, useMemoappropriately, State Colocation.
   • Bundle Size: Use React.lazy and dynamic imports for code splitting.
5. TypeScript: Strongly typed Props, Hooks type definitions, Generic Components.

Best Practices Guide

Component Design

• Function components: Always prioritize function components + Hooks.
• Props types: Use TypeScript interface to define Props, avoid using any。
• Single responsibility: Components should be as small as possible and focus on a single function.

Performance Optimization (recommended by Vercel & Callstack)

• Defer Await: Only in branches that truly need the data await, avoid blocking unrelated logic.
• Parallel requests: Use Promise.all to handle independent asynchronous operations in parallel.
• Server Components (RSC): Fetch data on the server as much as possible to reduce client-side JS bundle size and round-trip latency.

Common Pitfalls

• useEffect abuse: Avoid in useEffect performing unnecessary state synchronization (use derived state instead).
• Missing dependencies: useEffect and useCallback dependency arrays must be honest.
• Context abuse: Avoid putting frequently changing data directly into Context, which causes full re-renders.

Common Command Reference

• Create project (Vite): npm create vite@latest my-app -- --template react-ts
• Create project (Next.js): npx create-next-app@latest
• Install common libraries: pnpm add @tanstack/react-query zustand clsx tailwind-merge