Scaling React List to 100K Items

Imagine you're building a bulk configuration UI. Users connect to a data source — a Postgres database, a SaaS API, a data warehouse — and need to select which items to include: tables, fields, events, records. Dozens is easy. A few hundred is manageable. But what happens when the list hits 100,000? That's the situation I ran into. This post is about the architectural pattern we landed on, why it works, and how to apply it anywhere you have a large server-side list with sparse user edits. The naive approach and why it breaks The instinctive approach is to fetch the list, copy it into local state, and update entries in place as the user interacts: // Naive approach — don't do this at scale const [items, setItems] = useState(() => apiResponse.map(item => ({ ...item })) // copy everything ); function toggleItem(id: string) { setItems(prev => prev.map(item => // O(n) on every toggle item.id === id ? { ...item, isSelected: !item.isSelected } : item )); } This works fine at small