How do you render a very long list efficiently?
Model answer
Render only what is visible with list virtualisation (windowing), using a library such as TanStack Virtual or react-window. Also use stable keys, memoise row components, and paginate or infinite-scroll data from the server.
Rendering thousands of DOM nodes is the real cost, not the map call.
Learn this topic
React Performance: memo, useMemo, useCallback and When Not to Use Them in the course React.js Full Course: Beginner to Advanced.
Sign in to add your own answer.
More questions
- Why does a component re-render, and is re-rendering always bad?
- What does React.memo do?
- What is the difference between useMemo and useCallback?
- What is the React Compiler, and does it replace useMemo and useCallback?
- How do you lazy-load components in React?
- Why can inline objects and functions as props hurt memoisation?