Persist row state when row is scrolled out of view

[dcporter44]

It would be great if we could somehow persist the state of a component in a row.

For example:

I have 50 rows. Each row renders a React Component called <Row>. Row has a button on it that can change the Row's background-color to red using state inside of the Row component.

Currently, if I click a Row's button, the background will successfully change to red. However, when I scroll that row out of view and then scroll back to it, the color is reverted. This is because the row completely unmounts and re-mounts and therefore resets the state of the component.

The workaround currently is to not use state within the component, and instead pass the state as a prop from the parent. In this case, the parent state contains a map of all the child rows' state.

This can get overly complex, especially when a row has a form in it or more complicated state.

If there is a current feature for this that I'm unaware of, please let me know. Otherwise, it would be great if this library could store and remember the state of child components before they're unmounted.