Using ItemContainer and useState causes rerender

[NerdCowboy]

I'm using a GroupedVirtuoso with buttons in each row. To make my list more accessible, I'm trying to keep track of the focused index, so I can auto-scroll the list as a user tabs through it.

However, In order to properly style my list elements, I needed to add an ItemContainer. Once I add the ItemContainer in combination with setFocusedIndex via useState, it will always cause a rerender of the list once I try to tab past the first button and thus can't tab anywhere past the first row.

CodeSandbox with reproduced the issue:
https://codesandbox.io/s/heuristic-dijkstra-ml1sj

[petyosi]

The way I understand useState hooks, the behavior is expected. you call setState, and changing the state will re-render the container.

If I understand your requirements correctly, I believe that there is a simpler way to achieve what you describe - using scrollIntoView. Check this fork of the sandbox for what I mean.

[NerdCowboy]

I had a suspicion that might be the case case. I really appreciate you proving a better solution—wasn't even aware that scrollIntoView was thing.

[NerdCowboy]

For others that might still be running into a similar issue, my component was a little more complex than the sandbox I created, so I had to also wrap my ItemContainer in a useCallback to prevent it from causing rerenders that would cause it to lose focus.