InterviewDB Experience · Los Angeles

Feed List: Implement an Infinite-Scroll Feed List with Pagination and Prefetching

phone
Sign in to bookmark

Interview Experience

Problem

Build a feed list component that loads items in pages from a paginated API. As the user scrolls near the bottom, the next page is automatically fetched and appended. Items already fetched should not be re-fetched.

ts
interface FeedItem { id: string; content: string; }
interface FeedPage { items: FeedItem[]; nextCursor: string | null; }

async function fetchPage(cursor: string | null): Promise<FeedPage> { ... }

class FeedList {
  private items: FeedItem[] = [];
  private cursor: string | null = null;
  private loading = false;

  async loadMore(): Promise<void> { ... }     // fetch next page
  onScroll(scrollTop: number, clientHeight: number, scrollHeight: number): void { ... }
  render(): FeedItem[] {

**return** this.items; }
}

Requirement: Prefetch the next page when the user is within 20% of the bottom.

Follow-ups

  1. How do you prevent multiple simultaneous fetches if the user scrolls rapidly?
  2. How would you handle a fetch error mid-scroll gracefully (retry strategy)?
  3. If items can be deleted from the feed server-side, how do you handle stale cursors?
  4. How would you implement pull-to-refresh that resets the feed from the top?

Full Details

Problem

Build a feed list component that loads items in pages from a paginated API. As the user scrolls near the bottom, the next page is automatically fetched and appended. Items already fetched should not be re-fetched.

ts
interface FeedItem { id: string; content: string; }
interface FeedPage { items: FeedItem[]; nextCursor: string | null; }

async function fetchPage(cursor: string | null): Promise<FeedPage> { ... }

class FeedList {
  private items: FeedItem[] = [];
  private cursor: string | null = null;
  private loading = false;

  async loadMore(): Promise<void> { ... }     // fetch next page
  onScroll(scrollTop: number, clientHeight: number, scrollHeight: number): void { ... }
  render(): FeedItem[] {

**return** this.items; }
}

Requirement: Prefetch the next page when the user is within 20% of the bottom.

Follow-ups

  1. How do you prevent multiple simultaneous fetches if the user scrolls rapidly?
  2. How would you handle a fetch error mid-scroll gracefully (retry strategy)?
  3. If items can be deleted from the feed server-side, how do you handle stale cursors?
  4. How would you implement pull-to-refresh that resets the feed from the top?
Free preview. Unlock all Nextdoor questions →

About This Question

This is a candidate experience report from a nextdoor interview during the phone round.

It covers the following topics: Coding, Phone, Strings .

Topics

Coding Phone Strings

More Nextdoor Interview Questions

1p3a nextdoor software engineer tech phone screen interview overview LeetCode #56 Merge Intervals InterviewDB Comment Tree: Build and Traverse a Nested Comment Thread Like Reddit's InterviewDB Nextdoor SWE Onsite - Letter Combinations 1p3a Nextdoor Full-Time SDE Tech Phone Screen Interview Questions
← All Nextdoor questions Nextdoor Software Engineer Questions → All Coding Other Questions →