blueprint icon indicating copy to clipboard operation
blueprint copied to clipboard

Performance issue with the SET_IS_EXPANDED reducer action for Tree component

Open martinshaw opened this issue 1 year ago • 1 comments

Environment

  • Package version(s): 4.8.0
  • Operating System: macOS Catalina
  • Browser name and version: Brave 1.42.88

Code Sandbox

Link to fork

Steps to reproduce

  1. Try to click the node to expand it
  2. Observe that the reducer action SET_IS_EXPANDED runs nearly instantly.
  3. Use a much large hierarchy of nodes.
  4. Try to click the node to expand it
  5. 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.

martinshaw avatar Aug 17 '22 22:08 martinshaw

Also, I am really enjoying Blueprint as a UI framework. Thank you for its active development.

martinshaw avatar Aug 17 '22 22:08 martinshaw