Client-side slicing versus server-side fetch for 50k-row table with fixed columns

Answer

Server‑side pagination with a controlled current and pageSize state is the only practical way to keep the browser heap below 150 MB while showing a 50 000‑row Ant Design table with fixed left columns.

Confirmed facts

• Loading all 50 000 rows client‑side exceeds typical browser memory limits, even with fixed columns.
• Virtual scrolling cannot be used because fixed columns, rowSpan and colSpan are required.
• Server‑side pagination fetches only the rows needed for the current page, preserving heap usage.

Minimal state shape

Use a single state object:

const [tableState, setTableState] = useState({ current: 1, pageSize: 100 });

When onChange receives (page, size):

1. Derive the new current page: const newCurrent = (size !== tableState.pageSize) ? 1 : page;.
2. Update the state in one call: setTableState({ current: newCurrent, pageSize: size });.
3. Use current and pageSize from tableState to request the appropriate slice from the backend.

Why this avoids an extra render loop

The single setTableState update changes both values atomically, so React processes one render pass instead of two separate updates that would occur if you set current and pageSize independently.

Missing diagnostic detail

Please confirm whether Ant Design 5.x’s onChange resets current to 1 whenever pageSize changes in a controlled table.