Design a reusable React comment component

Q: Design a reusable React comment component

This question evaluates a candidate's ability to design reusable, accessible, and performant React components, encompassing state management, optimistic updates, pagination/infinite scroll, duplicate submission prevention and idempotency considerations, accessibility, and testing strategy.

Q: How do I approach System Design interview questions?

System Design questions require understanding of core concepts and practice. PracHub provides solutions with explanations to help you master system design interviews.

Q: What difficulty level is this interview question?

This is a hard difficulty System Design question, commonly asked during Onsite rounds at Coinbase.

Q: What role is this question designed for?

This question is commonly asked for Software Engineer candidates at Coinbase during technical interviews.

Question

Design and Implement a Reusable Comment Input-and-Feed Component in React

Goal

Build a reusable React component that provides a comment input and feed, suitable for both a video details page (slower-paced comments) and a live chat/danmaku context (high-throughput). The component should be resilient, accessible, and performant.

Requirements

Core interactions

Users can type a comment and submit it to append/prepend to the list.
Users can delete individual comments.

Pagination and infinite scroll

Implement backend pagination with infinite scroll.
Explain scroll detection (e.g., IntersectionObserver), deduplicating requests, end-of-list detection, and empty-state handling.

Loading and error states

Model and display UI for: initial load, load-more, submit, and delete.
Model and display error states for these operations.

Prevent duplicate submissions

Prevent client-side duplicates via UI disabling, in-flight tracking, and debouncing.
Use idempotency keys for submissions; discuss server-side idempotency design.

Optimistic UI

Implement optimistic posting and deleting.
Describe placeholder/tombstone items, reconciliation on success, rollback on failure, and conflict resolution.

Reusability and extensibility

Make the component extensible for both a video details page and a live chat/danmaku context.
Define component boundaries, props/interfaces, render overrides/slots.
Discuss state management options (local state vs global store vs React Query), virtualization, throttling/backpressure, and performance under high-throughput updates.

Accessibility

Include keyboard navigation, ARIA roles, and focus management.

Testing plan

Provide a testing strategy covering unit, integration, and mocked network tests.

Assume a typical REST API with cursor-based pagination. If something is unspecified, make minimal explicit assumptions and state them.

Design a reusable React comment component

Quick Overview

Design and Implement a Reusable Comment Input-and-Feed Component in React

Goal

Requirements

Solution

Comments (0)