Frontend News Feed

Design a Facebook/X-style news feed frontend. Cover rich text, mention and hashtag hover cards, API and local data models, pagination, offline behavior, list virtualization, component boundaries, and performance optimization. Requirements Design a Facebook/X-style scrolling news feed. Render rich-text feed items. Support mentions and hashtags that open hover cards. Define both the API contract and the client-side data model. Paginate the feed and explain loading, continuation, and update behavior. Define offline behavior and how locally available data is reconciled after reconnecting. Virtualize the feed so DOM size, memory use, and rendering work remain bounded. Divide responsibilities across the application shell, feed list, and feed-item components. Follow-up: identify performance bottlenecks and propose targeted optimizations. Notes Make data ownership and component boundaries explicit. The discussion drills into what belongs at the application, list, and individual-item layers rather than stopping at a component tree. Treat pagination, offline state, virtualization, rich text, and hover-card interaction as one system: each feature affects caching, item identity, measurement, rerendering, and recovery after stale data. The prompt can remain abstract, so drive clarification around API and local data ownership, pagination behavior, offline behavior, virtualization constraints, and the performance metric to optimize. Canonical frontend plan Keep an ordered list of feed-item IDs plus a normalized entity store keyed by stable ID. Merge cursor pages into that order with ID-based deduplication, and preserve a scroll anchor when refreshing or inserting items above the viewport. Render only the visible window plus a small overscan region. For variable-height items, cache measurements by stable ID and compensate the scroll offset when an earlier measurement changes. Persist the last successful feed snapshot for offline reads. On reconnect, revalidate from a cursor or version boundary and reconcile edits and deletions by stable ID; if write actions are in scope, send queued mutations with client-generated idempotency keys and have the server deduplicate retries. Fetch mention and hashtag hover data lazily and cache it outside individual rows so virtualization does not discard reusable state. Profile render counts, long tasks, network waterfalls, scroll jumps, and memory before choosing memoization or prefetching. Preparation Sketch the component tree, API response, local store, and ownership of pagination and offline state; rehearse explaining why each boundary exists. Build a small virtualized feed with rich-text items, hover cards, and pagination, then profile unnecessary rerenders and scroll-position jumps. Rehearse the offline lifecycle from cached read through reconnect and refresh, explaining how state flows through the application, feed-list, and feed-item layers.