Build and explain a React spreadsheet in four incremental parts. Focus on correct state flow and rendering behavior rather than visual polish. ### Clarifying Questions to Ask - Are cell values strings only, and should formulas update reactively when dependencies change? - Is the grid editable, and what keyboard navigation is expected? - Does “infinite” scrolling mean unbounded rows, columns, or both? - Which performance problem should memoization address: cell rendering, formula evaluation, or event callbacks? ### Part 1 - Editable Spreadsheet Grid Design a 10 by 10 grid of addressable cells such as `A0` and `B1`. A user can edit a cell, and the state model must make the current value of every visible cell deterministic. #### What This Part Should Cover - Stable cell identity, controlled editing, immutable state updates, and basic keyboard or focus behavior. ### Part 2 - Concatenation Formula Support a formula that concatenates two referenced cell values, for example `CONCAT(A0,B1)`. Explain parsing, dependency tracking, missing references, cycles, and when derived values are recomputed. #### What This Part Should Cover - Separates raw cell input from evaluated display value and handles invalid or cyclic dependencies explicitly. ### Part 3 - Infinite Scrolling Replace the fixed grid with incrementally loaded rows. Use an intersection observer on a sentinel to request or materialize more rows without attaching a scroll listener that fires on every pixel. #### What This Part Should Cover - Observer lifecycle, duplicate-load protection, stable row keys, loading state, and eventual virtualization. ### Part 4 - Memoization Identify avoidable renders or repeated formula work and revise the component boundaries, derived data, and callbacks using memoization only where referential stability and measured cost justify it. #### What This Part Should Cover - Correct dependency arrays, stable props, avoidance of stale closures, and recognition that memoization itself has cost. ### What a Strong Answer Covers - Maintains one authoritative state model and derives UI consistently. - Preserves formula correctness as referenced cells change. - Cleans up observers and prevents overlapping pagination requests. - Uses virtualization and memoization as targeted performance tools, not blanket decoration. - Discusses accessibility, test cases, and edge conditions across all four parts. ### Follow-up Questions 1. How would you support copy and paste over a rectangular selection? 2. How would a dependency graph invalidate only formulas affected by one edit? 3. What changes are required for collaborative editing by multiple users?