How do I keep a long comments section performant?
Use windowing. Render only the visible comments and load more on scroll, so the DOM does not grow unboundedly with thousands of replies. Stable keys by comment id keep updates efficient.
Verify This Answer
Cross-check this information using these trusted sources:
More FAQs in How to Build a Nested Comments Section Like YouTube in React
Use a tree data structure where each comment has an id, text, author, and a replies array. Create a recursive Comment component that renders a comment and recursively renders its replies. Update immutably when adding replies, and use the id as the key.
Because the same shape repeats at every level. A comment has replies that are themselves comments. The natural way to render this is a Comment component that uses itself to render its replies, which is recursive rendering.
Immutably. Create a new tree with the added reply in the right place, not a mutation of the original. React detects the new reference and re-renders. Use the comment id as the key so additions update correctly.
Still have questions?
Browse all our FAQs or reach out to our support team