Build Nested Comments with Collapsible Threads & Voting

Question

Accepted Answer

**Requirements**
- Recursive comments `{id, author, body, votes, children[]}`; indent per depth with thread line.
- Actions: reply (inline editor), collapse thread, upvote/downvote (optimistic), edit/delete own comment.
- Sort by Best/New (score = upvotes - downvotes); highlight new comments since last visit.

**Architecture**
- Recursive `Comment` component: `depth` prop for indent; `collapsed` local state; thread line clickable to expand.
- Updates via `updateTree(tree, id, updater)` DFS helper; optimistic vote: local delta, then `api.vote` with rollback.
- Editor: controlled textarea with `onSubmit` that inserts child via `insertChild(tree, parentId, newComment)`.

**What interviewers look for:** recursive component + key, immutable tree helpers, optimistic voting, depth limit handling, `contentEditable` vs textarea.

**Reference implementation**
```jsx
function updateTree(nodes, id, fn) {
  return nodes.map(n => n.id===id ? fn(n) : n.children ? {...n, children: updateTree(n.childre

Build Nested Comments with Collapsible Threads & Voting

Understand the problem

Attempt it yourself

Study the solution

Solution ready — 2 min read

Join the discussion

Discussion (0)

KEEP THE
STREAK ALIVE.

Understand the problem

Attempt it yourself

Study the solution

Solution ready — 2 min read

Join the discussion

Discussion (0)

KEEP THESTREAK ALIVE.

KEEP THE
STREAK ALIVE.