frontend-patterns

Frontend Patterns Skill

Advanced React and Next.js patterns for production frontend applications.

When to Use

Activate this skill when:

• Building React components or pages
• Making state management decisions
• Optimizing frontend performance
• Working with Next.js App Router
• Designing component APIs

---

1. Component Architecture

Component Composition Over Props Drilling

// ❌ Props drilling — fragile, hard to maintain
function App() {
  const [user, setUser] = useState<User | null>(null)
  return <Layout user={user}>
    <Sidebar user={user}>
      <UserMenu user={user} onLogout={() => setUser(null)} />
    </Sidebar>
  </Layout>
}

// ✅ Composition — components receive children, context for shared state
function App() {
  return (
    <AuthProvider>
      <Layout>
        <Sidebar>
          <UserMenu />
        </Sidebar>
      </Layout>
    </AuthProvider>
  )
}

// UserMenu reads from context — no drilling
function UserMenu() {
  const { user, logout } = useAuth()
  if (!user) return null
  return <button onClick={logout}>{user.name}</button>
}

Component Size Guidelines

Small (< 50 lines): Buttons, icons, badges, simple inputs
Medium (50-150 lines): Forms, cards, modals, list items
Large (150-300 lines): Pages, complex forms, dashboards
Too Large (> 300 lines): SPLIT into smaller components

Rule: If you need to scroll to understand a component, it's too big.

Container / Presentational Split

// Container: data fetching, state, side effects
function UserListContainer() {
  const { data, isLoading, error } = useQuery({ queryKey: ['users'], queryFn: fetchUsers })

  if (isLoading) return <UserListSkeleton />
  if (error) return <ErrorDisplay error={error} />
  return <UserList users={data} />
}

// Presentational: pure UI, receives props, no side effects
interface UserListProps {
  users: User[]
}

function UserList({ users }: UserListProps) {
  return (
    <ul role="list">
      {users.map(user => (
        <UserListItem key={user.id} user={user} />
      ))}
    </ul>
  )
}