architectural-patterns_skill

Overview

This skill describes React 19 architectural patterns, component design, and practical best practices for building scalable React apps. It focuses on component types (Server vs Client), composition and design patterns, file organization, performance optimizations, and accessibility guidance. The content is practical and aimed at improving structure, maintainability, and runtime efficiency.

How this skill works

The skill explains how to choose and structure Server Components (default in React 19) and Client Components, plus composition patterns like Container/Presenter, custom hooks, Suspense, and error boundaries. It inspects where logic belongs (server vs client), how state and data flow should be organized, and which optimizations and anti-patterns to avoid. It also provides concrete file and feature organization recommendations for consistent projects.

When to use it

• Render data-heavy views or access backend resources on the server to reduce client bundle size
• Use client components for interactivity, hooks, and browser APIs
• Separate data-fetching containers from presentational components for testability
• Wrap async UI with Suspense boundaries for graceful loading states
• Apply error boundaries around route segments or the whole app to capture runtime errors

Best practices

• Prefer composition over inheritance; use children, compound components, HOCs, or render props where appropriate
• Lift state to the nearest common ancestor and use Context only for deeply nested props or cross-cutting concerns
• Keep custom hooks single-responsibility and name them with a 'use' prefix; return objects for named values
• Organize files by feature with components, hooks, types, and utils grouped together and use a clear import order
• Optimize with React.memo, useMemo, useCallback, code splitting, and list virtualization; profile before optimizing
• Follow accessibility rules: semantic HTML, ARIA where needed, keyboard support, heading hierarchy, and color contrast

Example use cases

• Server Component fetches user profile from an API; Presenter renders layout and UI as a Client Component for interactions
• Feature folder contains components/, hooks/, and utils/ for an isolated search feature with its own state and tests
• Custom useAuth hook returns { user, login, logout, isLoading } and is consumed by multiple components
• Wrap a slow-loading dashboard with nested Suspense boundaries and loading fallbacks for each widget
• Use React.memo and virtualization to render a large, interactive list without freezing the UI