react

whyleonardo's avatarfrom whyleonardo

React and Next.js patterns, hooks, and component architecture.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 8, 2026
[Architecture Design]

When & Why to Use This Skill

This Claude skill streamlines React and Next.js development by providing expert guidance on component architecture, hooks best practices, and modern design patterns. It helps developers build scalable, high-performance web applications while ensuring code consistency, maintainability, and adherence to the latest Next.js standards like Server Components and optimized state management.

Use Cases

  • Architecting scalable Next.js applications using Server Components and efficient routing strategies to improve SEO and performance.
  • Refactoring complex logic into clean, reusable functional components and custom hooks following industry-standard naming conventions.
  • Implementing robust state management and data fetching patterns using tools like React Query, Context API, or Zustand.
  • Optimizing web performance through strategic code-splitting, lazy loading, and efficient rendering techniques.
  • Establishing comprehensive testing and validation workflows using React Testing Library and Zod for type-safe schemas.
namereact
descriptionReact and Next.js patterns, hooks, and component architecture.

React & Next.js Standards

Component Architecture

  • Prefer function components with hooks
  • Keep components small and focused (single responsibility)
  • Separate container (logic) from presentational (UI) components
  • Use composition over prop drilling
  • Co-locate related files (component, styles, tests, types)

Naming Conventions

  • Components: PascalCase (UserProfile.tsx)
  • Hooks: camelCase with use prefix (useAuth)
  • Event handlers: handle prefix (handleClick)
  • Boolean props: is, has, should prefixes

Hooks Best Practices

  • Follow rules of hooks (top-level, React functions only)
  • Extract custom hooks for reusable logic
  • Use useMemo/useCallback for expensive computations or stable references
  • Avoid premature memoization - measure first
  • Keep dependency arrays accurate and minimal

State Management

  • Start with local state (useState)
  • Lift state only when necessary
  • Use Context for truly global state (theme, auth)
  • Consider Zustand/Jotai for complex client state
  • Server state: React Query/SWR/TanStack Query

Next.js Patterns

  • Prefer Server Components by default
  • Use "use client" only when necessary (interactivity, hooks, browser APIs)
  • Leverage loading.tsx and error.tsx for loading/error states
  • Use Route Handlers for API endpoints
  • Implement proper metadata for SEO

Performance

  • Lazy load heavy components with React.lazy or next/dynamic
  • Optimize images with next/image
  • Use Suspense boundaries strategically
  • Avoid inline object/array literals in JSX props
  • Profile with React DevTools before optimizing

Forms & Validation

  • Use controlled components or React Hook Form
  • Validate with Zod for type-safe schemas
  • Show validation errors inline
  • Disable submit during loading
  • Handle server errors gracefully

Testing

  • Test behavior, not implementation
  • Use React Testing Library
  • Test user interactions and outcomes
  • Mock external dependencies
  • Write integration tests for critical flows