The answer
Virtualize it with a library like react-window so only the visible items render. Also use stable unique keys and avoid inline functions as props to reduce re-renders of list items.
React Performance and Optimization Interview Questions
How do you optimize a long list in React?
More FAQs in React Performance and Optimization Interview Questions
Measure with the Profiler first, then optimize the real bottlenecks: useMemo for expensive computations, stabilize prop references with useCallback, virtualize long lists, code split routes, and debounce expensive inputs. Never optimize blindly.
useMemo memoizes a value, useCallback memoizes a function. useMemo is for expensive computations, useCallback is for stable function references passed to memoized children. Both prevent unnecessary work but serve different cases.
React.memo wraps a component so it re-renders only when its props change by reference. It is used with useCallback and useMemo to prevent re-renders when the parent re-renders but the props have not meaningfully changed.
Still have questions?
Browse all our FAQs or reach out to our support team
Want to upskill yourself?
Your learning library
Small steps. Big possibilities.
Find your next course. Build something great.