Loading previous state on re-render

[borisboguslavsky]

Apologies if this is a duplicate, but I've searched other issues and looked at the 'Prevent re-render on parent prop/state changes' HOC, and I believe that solution doesn't apply in this case, since a re-render is essential.

I'm using this tree component within a container that can be collapsed or expanded. Collapsing the container removes it from the DOM entirely (it doesn't just hide the container with CSS). As a result, when expanding the container again, the tree component within it has to re-render.

I'm trying to make it so the previous state of the tree is loaded on the re-render, but I can't figure out a way to do this. The 'data' attribute seems to only be for initial state, and I've read that the tree manages the state of various checkboxes internally, so I'm not sure how to preserve it to be loaded in as the 'initial' data state on re-render.

[mrchief]

Any reason why you just don't hide and toggle? Re-render is inefficient if you're showing the same thing.

However, if you still want to do it, you'd have to keep track of state on your end as well. You can search old issues for similar asks but basically you'd be listening to onChange and updating the data in one of your state bags. So everytime, something is checked, you'd go into your data bag and update selected: true for corresponding node. When you re-render, you'd assign this updated data to the component and it should restore state for you.

[borisboguslavsky]

Thanks, this works. I could hide and toggle, and might do so in the future but I still need this functionality as I have a preset saving/loading feature in my app that needs to be able to alter the tree by saving/loading the current tree state to/from a JSON file and re-rendering it.

[mrchief]

Yeah I hear ya. Usually in a large app, you'd have some kind of state management going (redux/mobx/context) etc. and you'd keep track of it externally too. I can perhaps dig into old issues and find the HoC example for this and add it to readme.