React Performance

Big Head
  • 👀 View the deployed code on Github.
  • Not happy with the solution? 🐞🐛 Suggest a change.
  • Grammar errors? ✏️ Edit this page.

Windowing

Use React libraries to efficiently render large lists and tabular data. The idea is that only render the items that the user will see at a time.

  • tannerlinsley/react-virtual
  • bvaughn/react-virtualized
  • bvaughn/react-window

In this example, these components are using dynamic sizes. Each element's exact dimensions are unknown when rendered. An estimated dimension is used to get an a initial measurement, then this measurement is readjusted on the fly as each element is rendered.