← Back to courses
Data Course
Huge JSON Handling
Multiple approaches for handling large JSON data in React UIs.
Normal List
The starting point: draw the whole list, so the others have something to beat.
This draws every row on the page, and searches by checking every row on each keystroke. It is the simplest way to do it. It is here as the starting point that the other approaches are compared against. Load the 100,000-row table below and watch how slow the first draw is, and how far typing lags behind.
How it works
- Keep all the data in memory in one array.
- On every keystroke, check all 100,000 rows to find matches.
- Create one element on the page per matching row. Here 100,000 rows make about 400,000 elements, because each row holds three cells.
- The browser has to style, position, and draw all of them - even rows far below the screen.
Use it when
- The list is small: a few hundred, or a few thousand simple rows.
- Simple code matters more than speed, such as in a prototype or an internal admin screen.
- Every row must really be on the page, so that browser search (Ctrl+F) and printing can see all of it.
Watch out for
- Twice the rows means twice the elements. The first draw gets slower and memory use goes up.
- Each keystroke searches and redraws everything, so what you type appears late.
- The more rows there are, the more the browser has to measure and re-position, so scrolling turns jerky.