Build a Virtualized React Spreadsheet with Cell Formulas

Task

Implement a performant React spreadsheet component (Spreadsheet) that renders a grid of cells (columns labeled A through Z, rows labeled 1 through N). The grid must support direct text entry, simple concatenation formulas referencing other cells, efficient virtualization for large row counts, and targeted re-renders.

Requirements

1. Formula Evaluation & References:

   • A cell's raw input can be a literal string (e.g., Hello) or a formula beginning with =.
   • Support cell references and the string concatenation operator & (e.g., =A1 & " " & B1).
   • If a cell reference does not exist, evaluate it as #REF!.
   • If a circular dependency is detected (e.g., A1 references B1 and B1 references A1, or self-reference A1 = =A1), evaluate affected cells as #CYCLE!.

2. Virtualization:

   • The grid must scale to 10,000 rows without rendering all DOM elements simultaneously.
   • Given a container with fixed height and width, compute and render only visible rows/columns plus a configurable overscan buffer.

3. Re-render Optimization:

   • Changing a cell's raw value must not cause all visible cells to re-render. Only the edited cell and cells directly or transitively dependent on it should re-evaluate and re-render.

Component Interface

interface SpreadsheetProps {
  rowCount: number;
  colCount: number; // 1 to 26 (A-Z)
  cellWidth: number;
  cellHeight: number;
  viewportWidth: number;
  viewportHeight: number;
  overscan?: number; // default: 3
  initialData?: Record; // e.g., { A1: "Hello", B1: "World", C1: "=A1 & \" \" & B1" }
}

export const Spreadsheet: React.FC = (props) => {
  // Implementation
};

Example

Initial State:

• A1 = "Hello"
• B1 = "World"
• C1 = "=A1 & \" \" & B1"
• D1 = "=C1 & \"!\""

Output Rendered Values:

• A1: Hello
• B1: World
• C1: Hello World
• D1: Hello World!

Update:

• User edits A1 to "Hi".
• Only cells A1, C1, and D1 re-evaluate. B1 and all other cells remain untouched.
• C1 evaluates to Hi World, D1 evaluates to Hi World!.

Constraints

• rowCount <= 50,000
• colCount <= 26 (columns A to Z)
• Formula tokens are limited to cell references ([A-Z][1-9][0-9]*), string literals enclosed in double quotes ("..."), and the concatenation operator &.