blueprint
blueprint copied to clipboard
Performance issue with the SET_IS_EXPANDED reducer action for Tree component
Environment
- Package version(s): 4.8.0
- Operating System: macOS Catalina
- Browser name and version: Brave 1.42.88
Code Sandbox
Steps to reproduce
- Try to click the node to expand it
- Observe that the reducer action
SET_IS_EXPANDED
runs nearly instantly. - Use a much large hierarchy of nodes.
- Try to click the node to expand it
- Observe that the reducer action
SET_IS_EXPANDED
finishes after a very long time.
Actual behavior
I observe a huge delay after clicking on an expandable node. Around 40,000 nodes causes a near 10 second delay.
Expected behavior
I expect to observe a lack of delay or reasonably small delay after clicking on an expandable node.
Possible solution
The cause of this issue is the use of _.cloneDeep
which (as mentioned in https://github.com/lodash/lodash/issues/1984) includes functionality which I didn't assume this application would need.
I have tried to use JSON.parse(JSON.stringify(state));
instead and I observe the following JS error:
app.js:118382 Uncaught TypeError: Converting circular structure to JSON
--> starting at object with constructor 'FiberNode'
| property 'stateNode' -> object with constructor 'HTMLDivElement'
--- property '__reactFiber$i4pig28acw' closes the circle
at JSON.stringify (<anonymous>)
at treeExampleReducer (app.js:118382:41)
at updateReducer (app.js:246133:22)
at Object.useReducer (app.js:247240:16)
at Object.useReducer (app.js:266123:21)
at XXXX (app.js:118320:50)
at renderWithHooks (app.js:245800:18)
at updateFunctionComponent (app.js:248171:20)
at beginWork (app.js:249878:16)
at HTMLUnknownElement.callCallback (app.js:234760:14)
Is there a better, more performant alternative to _.cloneDeep
and/or a way to retrieve a JSON-able state for cloning ?
I haven't included the whole ~40,000 node testContent
object, because it indicates confidential information in some node labels.
Also, I am really enjoying Blueprint as a UI framework. Thank you for its active development.