React-window: useMemo inside the _row_ component when the parent re-renders

Did you read this part of the docs? https://react-window.now.sh/#/examples/list/memoized-list-items

There are two built-in memoization options:

• This one for React.memo
• And this one for class components

It doesn't look like your example uses either, which will cause unnecessary re-renders due to the way react-window manages its style cache.

I believe this issue doesn't require any changes on the part of this library, so I'm going to close it. We can talk more if you have clarification questions.

Hello again,

My example wasn't the most eloquent for what I tried to express, but I think I can now:

Starting from your example (memoized-list-items), on top of only rendering the _rows_ that are about to come into view, I want to also minimize the renders when you _activate_ an item (currently, when you click an item to activate it, all the _rows_ in the view get re-rendered).

I have eventually achieved that using the itemData prop on FixedSizeList (this let me avoid a nested closure); this in turn let me use useMemo.

This issue should remain closed but I believe it's an interesting example / optimization-exercise and I would appreciate further input from you.

The result is here: https://codesandbox.io/s/rr7w89w3q

I avoid the EXPENSIVE RENDER at the cost of a wrapper: CHEAP PREP.

Thanks for the effort you put into this library.

Yeah, that makes sense. If itemData changes, then it will _intentionally_ break the item cache. In most cases, this is what you want to do to avoid stale data. If you know that this isn't true for a particular use case, then some custom logic like you've done seems appropriate. 👍