How do you prevent visible content jumps when new items arrive in a feed?

Do not auto-prepend new posts into the visible feed viewport. Store incoming real-time items in a buffer and display a floating pill ("New posts available") that prepends items only when clicked or when the user scrolls to top.

Why is cursor pagination preferred over offset pagination for news feeds?

Offset pagination (LIMIT/OFFSET) produces duplicate or skipped items when new posts are inserted at the top of the feed. Cursor pagination uses an immutable item ID/timestamp pointer to guarantee deterministic pagination.

Design a News Feed UI

medium

Asked at

Adobe, LinkedIn, Meta

Problem statement

Design an infinite-scroll news feed with virtual scrolling, real-time updates, optimistic interactions, and accessibility — covering the core frontend architecture decisions.

Premium

The full solution is part of HelloFrontend Pro

The question above is free to read in full. Upgrade to unlock the interactive workspace and the senior-level walkthrough that go with it.

Full RADIO-framework walkthrough with architecture diagrams
Data model, API design, and rendering strategy trade-offs
Performance, accessibility, and offline sections plus a model answer

Unlock the full solution →

Already a member? Log in to open the workspace.

Design a News Feed UI

Problem statement

The full solution is part of HelloFrontend Pro

More System Design questions

Design a Component Library / Design System

Design Travel Booking Platform (Expedia/Booking.com)

Design Perplexity (RAG Search with Citations)

Design a Self-healing React Component