Design and implement a reusable comment input-and-feed component in React. Requirements: - Allow users to type a comment and submit it to append to the list. - Support deleting individual comments. - Implement backend pagination with infinite scroll; explain scroll detection (e.g., IntersectionObserver), deduplicating requests, end-of-list detection, and empty-state handling. - Model loading states (initial load, load-more, submit, delete) and error states; show appropriate UI. - Prevent duplicate submissions (UI disabling, in-flight tracking, debouncing, and/or idempotency keys) and discuss server-side considerations for idempotency. - Implement optimistic UI for posting and deleting: describe placeholder/tombstone items, reconciliation on success, rollback on failure, and conflict resolution. - Make the component extensible for both a video details page and a live chat/danmaku context; define component boundaries, props/interfaces, render overrides/slots, and discuss state management options (local state vs global store vs React Query), virtualization, throttling/backpressure, and performance under high-throughput updates. - Include accessibility (keyboard navigation, ARIA roles, focus management) and a testing plan (unit, integration, and mocked network).

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.

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.

What difficulty level is this interview question?

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

What role is this question designed for?

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

Design a reusable React comment component | Coinbase Interview 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 and Implement a Reusable Comment Input-and-Feed Component in React

Goal

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

Submit Your Answer to Earn 20XP

Design a reusable React comment component

Quick Overview

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

Goal

Requirements

Solution

Submit Your Answer to Earn 20XP