Example list with ten total rows and a viewport large enough to display two rows.
█ - Visible row ▓ - Hidden/display-locked row ░ - Empty space (nothing rendered here)
Sync priority commit renders enough rows to fill the viewport. Below them is empty space.
0 ███ ┑
1 ███ ┙
2 ░░░
3 ░░░
4 ░░░
5 ░░░
6 ░░░
7 ░░░
8 ░░░
9 ░░░
Idle priority update pre-renders another chunk of rows below the viewport. These rows are hidden and display-locked so that both React and the browser knows they're lower priority. Above and below these new rows is empty space.
0 ███ ┑
1 ███ ┙
2 ▓▓▓
3 ▓▓▓
4 ░░░
5 ░░░
6 ░░░
7 ░░░
8 ░░░
9 ░░░
User scrolls, causing the viewport to move within the range of pre-rendered rows. Sync priority commit updates all rendered rows. One previously visible/unlocked row is updated to be hidden/locked. One previously hidden/locked row is updated ot be visible/unlocked.
0 ▓▓▓
1 ███ ┑
2 ███ ┙
3 ▓▓▓
4 ░░░
5 ░░░
6 ░░░
7 ░░░
8 ░░░
9 ░░░
Idle priority update adusts the pre-rendered rows to center around the new viewport.
0 ▓▓▓
1 ███ ┑
2 ███ ┙
3 ▓▓▓
4 ▓▓▓
5 ░░░
6 ░░░
7 ░░░
8 ░░░
9 ░░░
User scrolls quickly, causing the viewport to move beyond the range of pre-rendered rows. Sync priority commit renders enough rows to fill the viewport.
0 ░░░
1 ░░░
2 ░░░
3 ░░░
4 ███ ┑
5 ███ ┙
6 ░░░
7 ░░░
8 ░░░
9 ░░░
Idle priority update adusts the pre-rendered rows to center around the new viewport.
0 ░░░
1 ░░░
2 ▓▓▓
3 ▓▓▓
4 ███ ┑
5 ███ ┙
6 ▓▓▓
7 ▓▓▓
8 ░░░
9 ░░░