#####   ######  #####    ###    #   #  ###  #   #  ######
##  ##  ##      ##  ##  ## ##   #   #   #   #   #  ##
#####   ####    #####   #   #   #   #   #   #   #  ####
##  #   ##      ##      ## ##    # #    #    # #   ##
##   #  ######  ##       ###      #    ###    #    ######

$ curl repovive.com/roadmaps/frontend-system-design-interview-prep/component-architecture/component-hierarchy-example

░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░█████████████████████████████████████████████████████████████████████████████████████████████████████████████████████

#####   ######  #####    ###    #   #  ###  #   #  ######
##  ##  ##      ##  ##  ## ##   #   #   #   #   #  ##
#####   ####    #####   #   #   #   #   #   #   #  ####
##  #   ##      ##      ## ##    # #    #    # #   ##
##   #  ######  ##       ###      #    ###    #    ######

$ curl repovive.com/roadmaps/frontend-system-design-interview-prep/component-architecture/component-hierarchy-example

Repovive

Component Hierarchy Example - Component Architecture | Frontend System Design Interview Prep | Repovive

Repovive.

Frontend System Design Interview Prep17 sections · 206 units12h total

Open in Course

Component Hierarchy Example

Putting it together

Let's design a comment thread component hierarchy.

Top level:

CommentSection
├── CommentList
│   └── CommentItem (recursive for replies)
│       ├── Avatar
│       ├── CommentContent
│       └── CommentActions
├── CommentInput
└── LoadMoreButton

Key decisions:

CommentItem handles its own replies (recursive)
Avatar is reusable across the app
CommentActions handles like/reply callbacks
CommentInput is controlled by parent

This hierarchy shows clear boundaries and single responsibilities.