How to Build a Nested Comments Section Like YouTube in React

How to Build a Nested Comments Section Like YouTube in React

Nested comments are a classic React feature that teaches recursive rendering. Here is how to build them like YouTube.

The Data Structure

Comments are a tree. Each comment has an id, text, author, and a replies array that contains more comments. The same shape repeats at every level, which makes recursion natural.

The Comment Component

Create a Comment component that renders a single comment, then recursively renders its replies using the same Comment component. This is recursive rendering: a component that uses itself.

Indentation

Indent each level visually to show nesting. Use left padding or margin per level, capped at a reasonable depth so deeply nested threads do not push off the screen.

Adding Comments

Each level has a reply box that adds to that comment's replies array. Updates must be immutable: create a new tree with the added reply, not a mutation of the original.

Likes and Actions

Comments have likes, replies, and timestamps. Track these in state and update immutably when the user likes or replies.

Keys for Stable Updates

Use the comment id as the key for every comment, so React tracks them correctly as replies are added or the tree updates.

Windowing for Performance

For a long comments list, render only the visible comments and load more on scroll, to keep the DOM from growing unboundedly with thousands of replies.

The Takeaway

A nested comments section uses a tree data structure, a recursive Comment component, immutable updates for adding replies, stable keys by id, and windowing for performance. It is the classic recursive-rendering example in React.