Preseving item state after scrolling away

[itayganor]

Hi :)

Just wanted to say thank you for the most simple virtualization library I've ever seen. I've been through react-virtualized and react-window, and this one is just heaven.

I do have one question though:
When I expand one of my list items, It won't be expanded the next time it will be mounted.
In other words - it seems like I lose the component's state when it's out of view.

Here's an example:

As you can see, the default state is collapsed. I expand one of the items, scroll down, and scroll back up to make it inside the view again, and it's collapsed again. You can see the scrollbar jumping a few pixels when the list item gets remounted with a wrong height (collapsed instead of expanded, but the virtual list remembers the last height).

I couldn't find anything related to this on docs.

How can this be solved? I imagine some kind of memoization, but I couldn't make it work.

Thanks!

[vinujan59]

storing the expanded state in list’s parent would be a solution. Propagate the expanded event and store it in object or something and pass down the expanded state to list element.

[itayganor]

storing the expanded state in list’s parent would be a solution. Propagate the expanded event and store it in object or something and pass down the expanded state to list element.

This is indeed a good solution, but the thing is the state might contain more than just the expansion state. I'm actually trying to achieve a generic component that will accept any kind of item as a child, and remember each one's state when it's not visible.

Passing a state object to the parent is still a valid solution, but I'm looking for something a bit more independent

[fonty422]

It's not possible to have it stored in the object its self. You have two choices:

1. On the onExpand event sends something back to the parent which holds a list of what is expanded which is parsed to each list item on render. It does require you to have a means to know which things are expanded and closed - and that should NOT be the list index.
2. Use something like React-Redux to store not only the general information to display, but also the expanded prop. You can default it to closed, but when you expand it modifies the expanded prop to true. That way the object kind of does keep track of its own expanded state... via a store.

The second one is definitely my preferred option as all my data for the entire app is already held in a redux store.
Perhaps, though, there might be the possibility of someone more cleaver than I to develop a better, more permanent and independent solution.

[petyosi]

I second the suggestions provided here - the item state should be preserved externally, using the state management of your choice.

[pyreta]

@itayganor Can I see the code for this expandable list you made?

[fonty422]

As in just for the list, or including the redux part?

[theconnectionist]

As in just for the list, or including the redux part?

@fonty422 Just for the list would be good enough, but redux would be a nice-to-have :-)

[fonty422]

Here's a basic sandbox complete with a basic redux set up.
If you're not familiar with using redux, this might appear a bit confusing and I recommend a good tutorial - perhaps even a tutorial series. I've tried to add plenty of comments where I think they're needed for clarification.

[theconnectionist]

Thank you fonty422. Much appreciated. I see the Accordion control is a bit cleaner to use than the Collapse control.