Nested Comments
Problem statement
Nested Comments is a classic recursive component challenge that appears in interviews at companies like Meta, Reddit, and Twitter. The challenge isn't just rendering a tree — it's managing nested state (add reply, toggle collapse) without mutating the original data structure, and doing so efficiently.
Build a comment thread that renders a tree of comments where each comment can have replies, and those replies can have their own replies. Each comment should have a Reply button that shows an inline textarea for adding a new child comment, and a Collapse/Expand button to hide or show its subtree.
The key architectural challenge is immutable tree updates: when a user adds a reply to a comment 3 levels deep, you must update the root comments array immutably — no direct mutation allowed. This tests your understanding of recursive state transformations.
Requirements & constraints
- Render arbitrarily deep comment trees recursively
- Each comment shows author, timestamp, and body text
- Reply button shows an inline textarea for adding a child comment
- Collapse/Expand toggles visibility of the entire subtree
- Adding a reply updates the tree immutably
- New replies appear at the top of the replies list
How to approach Nested Comments
The strategy an interviewer expects you to reach for.
Why This Question Exists Nested Comments is a pure recursive component challenge. It tests three things at once: recursive React component design, immutable tree state updates, and the separation of UI state (collapsed/replying) from data state. Companies like Meta, Reddit, and Twitter use comment systems in interviews because the problem is deceptively approachable but has sharp edges in the implementation.
The full solution is part of HelloFrontend Pro
The question above is free to read in full. Upgrade to unlock the interactive workspace and the senior-level walkthrough that go with it.
- Live React sandbox pre-wired for this component
- Time-boxed checkpoints that mirror a real 45-minute round
- Interviewer scoring criteria and a full reference implementation
Already a member? Log in to open the workspace.