{
  "$type": "site.standard.document",
  "canonicalUrl": "https://johnnyreilly.com/posts/from-react-window-to-react-virtual",
  "description": "Switch from `react-window` to `react-virtual` for simpler code, TypeScript support and improved perceived performance.",
  "path": "/posts/from-react-window-to-react-virtual",
  "publishedAt": "2020-05-10T00:00:00.000Z",
  "site": "at://did:plc:yy3apqjlms24kso7ahn7lbmb/site.standard.publication/3mova7c4nho2b",
  "tags": [
    "react"
  ],
  "textContent": "The tremendous Tanner Linsley recently released react-virtual. react-virtual provides \"hooks for virtualizing scrollable elements in React\".\n\n\n\nI was already using the (also excellent) react-window for this purpose. react-window does the virtualising job and does it very well indeed However, I was both intrigued by the lure of the new shiny thing. I've also never been the biggest fan of react-window's API. So I tried switching over from react-window to react-virtual as an experiment. To my delight, the experiment went so well I didn't look back!\n\nWhat did I get out of the switch?\n\n- Simpler code / nicer developer ergonomics. The API for react-virtual allowed me to simplify my code and lose a layer of components.\n- TypeScript support in the box\n- Improved perceived performance. I didn't run any specific tests to quantify this, but I can say that the same functionality now feels snappier.\n\nI tweeted my delight at this and Tanner asked if there was commit diff I could share. I couldn't as it's a private codebase, but I thought it could form the basis of a blogpost.\n\n> Nice! Do you have a commit diff we could see?\n>\n> — Tanner Linsley ⚛️ (@tannerlinsley) May 10, 2020\n\nIn case you hadn't guessed, this is that blog post...\n\nMake that change\n\nSo what does the change look like? Well first remove react-window from your project:\n\nAdd the dependency to react-virtual:\n\nChange your imports from:\n\nto:\n\nChange your component code from:\n\nOf the above you can delete the ListItemProps type and the associate RenderRow function. You won't need them again! There's no longer a need to pass down data to the child element and then extract it for usage; it all comes down into a single simpler component.\n\nReplace the ImportantDataList component with this:\n\nAnd you are done! Thanks Tanner for this tremendous library!",
  "title": "From react-window to react-virtual"
}