{"id":279729,"date":"2018-12-13T08:20:58","date_gmt":"2018-12-13T15:20:58","guid":{"rendered":"http:\/\/css-tricks.com\/?p=279729"},"modified":"2018-12-13T08:20:58","modified_gmt":"2018-12-13T15:20:58","slug":"rendering-lists-using-react-virtualized","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/rendering-lists-using-react-virtualized\/","title":{"rendered":"Rendering Lists Using React Virtualized"},"content":{"rendered":"

Working with data in React is relatively<\/em> easy because React is designed to handle data as state. The hassle begins when the amount<\/em> of data you need to consume becomes massive. For example, say you have to handle a dataset which is between 500-1,000 records. This can result in massive loads and lead performance problems. Well, we\u2019re going to look at how we can make use of virtualized<\/em> lists in React to seamlessly render a long list of data in your application.<\/p>\n

<\/p>\n

We\u2019re going to use the React Virtualized<\/a> component to get what we need. It will allow us to take large sets of data, process them on the fly, and render them with little-to-no jank.<\/p>\n

The setup<\/h3>\n

React Virtualized already has a detailed set of instructions to get it up and running, so please check out the repo<\/a> to get started.<\/p>\n

We\u2019re going to want data to work with, so we will set up a function which uses faker to create a large data set.<\/p>\n

function createRecord(count) {\r\n  let records = [];\r\n\r\n  for (let i = 0; i < count; i++) {\r\n    records.push({\r\n      username: faker.internet.userName(),\r\n      email: faker.internet.email()\r\n    });\r\n  }\r\n  return records;\r\n}<\/code><\/pre>\n
Next, we will pass it the number of data records we want to create, like so:<\/p>\n
const records = createRecord(1000);<\/code><\/pre>\n
Alright, now we have what we need to work on rendering a list of those records!<\/p>\n
Creating a virtualized list<\/h3>\n
Here\u2019s the list we want to create, sans styling. We could make use of the few presentational styles that the library includes by importing the included CSS file, but we’re going to leave that out in this post.<\/p>\n
See the Pen React Virtualized 1<\/a> by Kingsley Silas Chijioke (@kinsomicrote<\/a>) on CodePen<\/a>.<\/p>\n
Go ahead and re-run that demo. Crazy fast, right?<\/p>\n
You might wonder what the heck React Virtualized is doing behind the scenes to make that happen. Turns out it’s a bunch of crazy and cool sizing, positioning, transforms and transitions that allow the records to scroll in and out of view. The data is already there and rendered. React Virtualized creates a window frame that allows records to slide in and out of view as the user scrolls through it.<\/p>\n
To render a virtualized list in React Virtualized, we make use of its List<\/code> component, which uses a Grid<\/code> component internally to render the list. <\/p>\n
First, we start by setting up rowRenderer<\/code>, which is responsible for displaying a single row and sets up an index that assigns an ID to each record.<\/p>\n
rowRenderer = ({ index, isScrolling, key, style }) => {\r\n    return (\r\n      <div key={key} style={style}>\r\n        <div>{this.props.data[index].username}<\/div>\r\n        <div>{this.props.data[index].email}<\/div>\r\n      <\/div>\r\n    );\r\n  };<\/code><\/pre>\n
As you can see, this returns a single div node that contains two additional divs: one for the username and another for the email. You know, a common list pattern to display users.<\/p>\n
rowRenderer<\/code> accepts several parameters. Here\u2019s what they are and what each one does:<\/p>\n