when i use .setState(..) dropdown is not showing any item

[mikdatdogru]

I want to set the selectedNodes data from the onChange to the state.

but when i use .setState(..) transferred to state but dropdown is not showing any item.
doesn't selected any items and doesn't show any selected items.

[mrchief]

I want to set the selectedNodes data from the onChange to the state.

The component maintains its own selection state. You don't need to do that.

[mikdatdogru]

@mrchief but i need to selectedNodes data.

so how else can get the data of the items I have checked ?

[mrchief]

selectedNodes gives you that data. If you do a setState, React will re-render your component, which in turn will re-render all sub components. And for whatever reason, if you don't have the initial tree data during this re-render (guessing, since I don't have more details), it'll wipe out the tree.

Re-renders, when the data has not changed (for sub components), is a terrible waste of cycles. So one suggestion would be to see if you can avoid that, which in turn will avoid this issue in the first place.

If, for some reason, you can't do that, then you can use the approach laid out here: Prevent re-render on parent to prevent the tree control from getting re-initialized every time.

Hope this helps. If you have more questions, it'd be helpful if you can create a CodeSandbox (you can fork any of the existing ones and make your changes on top) that highlights the issues.

[josvegit]

I also call setState, idk thought that was the react way :). They way I solved it:

Create initial tree, with paths to each node. When toggled, find the node that was toggled and set it as toggled/not-toggled (if it becomes closed => close its children etc). When checking/unchecking traverse tree and update etc. I also keep track of the path to each node so that I know If I can ignore part of the tree. This is maybe overkill, but feels like you have better controll with the setState solution.

Some of this specific to my domain, like filterString and stuff. The component is used to select affected switches for an ISP blackout (idk what its called in english) . Maybe all of this is overkill. Maybe the better solution is to just set a variable with the selectedNodes and don't call setState..

Hmm insert code did not work => https://pastebin.com/piAJRSV0

[mikdatdogru]

ahhh. i understand now. of course you right.

thanks for example. I think I should improve myself on HOC
thanks again.

[mrchief]

Maybe the better solution is to just set a variable with the selectedNodes and don't call setState..

Yes, its perfectly valid to hold data in a variable if it doesn't affect the UI.

Create initial tree, with paths to each node.

onChange will return this data - both currentNode and all nodes in selectedNodes will also bubble up any extra props you pass with the nodes. So you can use the paths to keep track of what's selected and what's not. It does that with a reason - to accommodate domain specific stuff without having to go crazy.

I use it the same way (i.e. create paths and then just use that to manipulate/send data to backend).

Re-initializing something like a tree is not cheap, and so should be avoided. You also loose any previous search memoizations when you re-initialize the tree.

@josvegit Maybe avoiding re-render will help with your 15k nodes as well.

[josvegit]

Yeah felt a bit like I was doing something that was already solved. Ill see if It makes a big difference, and maybe I can get you some scrambled version of the data I use to populate the component.

[josvegit]

Wow made the component feel much more responsive ! Search is still slow, ill get you the data somehow :)

[mrchief]

FWIW, you can maybe use one of these tools to generate data that's similar (in terms of complexity)

https://www.json-generator.com/
https://mockaroo.com/
http://www.freedatagenerator.com/json-data-generator

[mrchief]

Just created #80 to track search improvements. Can this be closed now?