In the provided code, a parent component re-renders due to a state change unrelated to the list data. Why does this cause a performance issue for the `FixedSizeList`?
React JS interview question for Advanced practice.
Answer
The items array is redefined on every render, creating a new array reference that defeats react-window's internal optimizations.
Explanation
Even if the data within the items array is the same, defining it inside the render scope of ListContainer means a new array reference is created on each render. Virtualization libraries rely on shallow prop comparisons to optimize. A new array reference for the itemData prop defeats these optimizations and causes unnecessary work. The items array should be memoized with useMemo or defined outside the component if it's static.