In this custom virtualization component, what is the primary performance bottleneck?
React JS interview question for Advanced practice.
Answer
The items.slice() operation is re-calculated on every render. This expensive calculation should be memoized with useMemo.
Explanation
The items.slice() operation creates a new array on every single render, which is triggered by every scroll event. For a large items array, this is computationally expensive and unnecessary. This calculation should be wrapped in a useMemo hook to ensure it only runs when its dependencies (items, startIndex, endIndex) actually change.