react-select2-wrapper icon indicating copy to clipboard operation
react-select2-wrapper copied to clipboard

Published 20 hours ago • verified publisher icon rkit

1.0.4-beta3 _syncSubtreeselect2 freezes the browser

Open gazpachu opened this issue 7 years ago • 7 comments

Recently I've started to experience an issue that freezes the browser for about 1 minute.

This is the CPU profile:

screen shot 2017-03-24 at 16 56 30

Any idea of what could be causing this issue?

gazpachu avatar Mar 24 '17 16:03 gazpachu

@rkit any idea?

gazpachu avatar Mar 27 '17 10:03 gazpachu

I have no idea, sorry. I think this problem is not related to the component.

rkit avatar Mar 27 '17 10:03 rkit

@rkit it seems the issue I'm experiencing is related with the data property. Whenever my component rerenders with new data, that's when the app freezes. Could it be the shallowEqualFuzzy? I'm using 6 select2, one of them with 1800 items and a couple of them with 200 items each.

gazpachu avatar Mar 28 '17 12:03 gazpachu

This is the log of what's happening when the page loads again:

componentWillUnmount
Select2.js?54eb:164 destroySelect2
Select2.js?54eb:189 detachEventHandlers
Select2.js?54eb:80 componentWillUnmount
Select2.js?54eb:164 destroySelect2
Select2.js?54eb:189 detachEventHandlers
Select2.js?54eb:80 componentWillUnmount
Select2.js?54eb:164 destroySelect2
Select2.js?54eb:189 detachEventHandlers
Select2.js?54eb:80 componentWillUnmount
Select2.js?54eb:164 destroySelect2
Select2.js?54eb:189 detachEventHandlers
Select2.js?54eb:80 componentWillUnmount
Select2.js?54eb:164 destroySelect2
Select2.js?54eb:189 detachEventHandlers
Select2.js?54eb:80 componentWillUnmount
Select2.js?54eb:164 destroySelect2
Select2.js?54eb:189 detachEventHandlers
6Select2.js?54eb:251 render
Select2.js?54eb:60 componentDidMount
Select2.js?54eb:89 initSelect2
Select2.js?54eb:211 prepareOptions
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:199 prepareValue
Select2.js?54eb:136 updateValue
Select2.js?54eb:156 fuzzyValuesEqual
Select2.js?54eb:60 componentDidMount
Select2.js?54eb:89 initSelect2
Select2.js?54eb:211 prepareOptions
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:199 prepareValue
Select2.js?54eb:136 updateValue
Select2.js?54eb:156 fuzzyValuesEqual
Select2.js?54eb:60 componentDidMount
Select2.js?54eb:89 initSelect2
Select2.js?54eb:211 prepareOptions
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:199 prepareValue
Select2.js?54eb:136 updateValue
Select2.js?54eb:156 fuzzyValuesEqual
Select2.js?54eb:60 componentDidMount
Select2.js?54eb:89 initSelect2
Select2.js?54eb:211 prepareOptions
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:199 prepareValue
Select2.js?54eb:136 updateValue
Select2.js?54eb:156 fuzzyValuesEqual
Select2.js?54eb:60 componentDidMount
Select2.js?54eb:89 initSelect2
Select2.js?54eb:211 prepareOptions
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:199 prepareValue
Select2.js?54eb:136 updateValue
Select2.js?54eb:156 fuzzyValuesEqual
Select2.js?54eb:60 componentDidMount
Select2.js?54eb:89 initSelect2
Select2.js?54eb:211 prepareOptions
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:199 prepareValue
Select2.js?54eb:136 updateValue
Select2.js?54eb:156 fuzzyValuesEqual
Select2.js?54eb:67 componentWillReceiveProps
Select2.js?54eb:104 updSelect2
Select2.js?54eb:189 detachEventHandlers
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:251 render
Select2.js?54eb:67 componentWillReceiveProps
Select2.js?54eb:104 updSelect2
Select2.js?54eb:189 detachEventHandlers
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:251 render
Select2.js?54eb:67 componentWillReceiveProps
Select2.js?54eb:104 updSelect2
Select2.js?54eb:189 detachEventHandlers
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:251 render
Select2.js?54eb:67 componentWillReceiveProps
Select2.js?54eb:104 updSelect2
Select2.js?54eb:189 detachEventHandlers
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:251 render
Select2.js?54eb:67 componentWillReceiveProps
Select2.js?54eb:104 updSelect2
Select2.js?54eb:189 detachEventHandlers
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:251 render
Select2.js?54eb:67 componentWillReceiveProps
Select2.js?54eb:104 updSelect2
Select2.js?54eb:189 detachEventHandlers
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:251 render
Select2.js?54eb:74 componentDidUpdate
Select2.js?54eb:199 prepareValue
Select2.js?54eb:136 updateValue
Select2.js?54eb:156 fuzzyValuesEqual
Select2.js?54eb:74 componentDidUpdate
Select2.js?54eb:199 prepareValue
Select2.js?54eb:136 updateValue
Select2.js?54eb:156 fuzzyValuesEqual
Select2.js?54eb:74 componentDidUpdate
Select2.js?54eb:199 prepareValue
Select2.js?54eb:136 updateValue
Select2.js?54eb:156 fuzzyValuesEqual
Select2.js?54eb:74 componentDidUpdate
Select2.js?54eb:199 prepareValue
Select2.js?54eb:136 updateValue
Select2.js?54eb:156 fuzzyValuesEqual
Select2.js?54eb:74 componentDidUpdate
Select2.js?54eb:199 prepareValue
Select2.js?54eb:136 updateValue
Select2.js?54eb:156 fuzzyValuesEqual
Select2.js?54eb:74 componentDidUpdate
Select2.js?54eb:199 prepareValue
Select2.js?54eb:136 updateValue
Select2.js?54eb:156 fuzzyValuesEqual
Select2.js?54eb:67 componentWillReceiveProps
Select2.js?54eb:104 updSelect2
Select2.js?54eb:189 detachEventHandlers
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:251 render
Select2.js?54eb:67 componentWillReceiveProps
Select2.js?54eb:104 updSelect2
Select2.js?54eb:189 detachEventHandlers
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:251 render
Select2.js?54eb:80 componentWillUnmount
Select2.js?54eb:164 destroySelect2
Select2.js?54eb:189 detachEventHandlers
Select2.js?54eb:67 componentWillReceiveProps
Select2.js?54eb:104 updSelect2
Select2.js?54eb:189 detachEventHandlers
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:251 render
Select2.js?54eb:67 componentWillReceiveProps
Select2.js?54eb:104 updSelect2
Select2.js?54eb:189 detachEventHandlers
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:251 render
Select2.js?54eb:67 componentWillReceiveProps
Select2.js?54eb:104 updSelect2
Select2.js?54eb:189 detachEventHandlers
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:251 render
Select2.js?54eb:74 componentDidUpdate
Select2.js?54eb:199 prepareValue
Select2.js?54eb:136 updateValue
Select2.js?54eb:156 fuzzyValuesEqual
Select2.js?54eb:74 componentDidUpdate
Select2.js?54eb:199 prepareValue
Select2.js?54eb:136 updateValue
Select2.js?54eb:156 fuzzyValuesEqual
Select2.js?54eb:74 componentDidUpdate
Select2.js?54eb:199 prepareValue
Select2.js?54eb:136 updateValue
Select2.js?54eb:156 fuzzyValuesEqual
Select2.js?54eb:74 componentDidUpdate
Select2.js?54eb:199 prepareValue
Select2.js?54eb:136 updateValue
Select2.js?54eb:156 fuzzyValuesEqual
Select2.js?54eb:74 componentDidUpdate
Select2.js?54eb:199 prepareValue
Select2.js?54eb:136 updateValue
Select2.js?54eb:156 fuzzyValuesEqual
Select2.js?54eb:67 componentWillReceiveProps
Select2.js?54eb:104 updSelect2
Select2.js?54eb:189 detachEventHandlers
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:251 render
Select2.js?54eb:67 componentWillReceiveProps
Select2.js?54eb:104 updSelect2
Select2.js?54eb:189 detachEventHandlers
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:251 render
Select2.js?54eb:67 componentWillReceiveProps
Select2.js?54eb:104 updSelect2
Select2.js?54eb:189 detachEventHandlers
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:251 render
Select2.js?54eb:67 componentWillReceiveProps
Select2.js?54eb:104 updSelect2
Select2.js?54eb:189 detachEventHandlers
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:251 render
Select2.js?54eb:67 componentWillReceiveProps
Select2.js?54eb:104 updSelect2
Select2.js?54eb:164 destroySelect2
Select2.js?54eb:89 initSelect2
Select2.js?54eb:211 prepareOptions
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:189 detachEventHandlers
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:251 render
Select2.js?54eb:74 componentDidUpdate
Select2.js?54eb:199 prepareValue
Select2.js?54eb:136 updateValue
Select2.js?54eb:156 fuzzyValuesEqual
Select2.js?54eb:74 componentDidUpdate
Select2.js?54eb:199 prepareValue
Select2.js?54eb:136 updateValue
Select2.js?54eb:156 fuzzyValuesEqual
Select2.js?54eb:74 componentDidUpdate
Select2.js?54eb:199 prepareValue
Select2.js?54eb:136 updateValue
Select2.js?54eb:156 fuzzyValuesEqual
Select2.js?54eb:74 componentDidUpdate
Select2.js?54eb:199 prepareValue
Select2.js?54eb:136 updateValue
Select2.js?54eb:156 fuzzyValuesEqual
Select2.js?54eb:74 componentDidUpdate
Select2.js?54eb:199 prepareValue
Select2.js?54eb:136 updateValue
Select2.js?54eb:156 fuzzyValuesEqual
Select2.js?54eb:67 componentWillReceiveProps
Select2.js?54eb:104 updSelect2
Select2.js?54eb:189 detachEventHandlers
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:251 render
Select2.js?54eb:67 componentWillReceiveProps
Select2.js?54eb:104 updSelect2
Select2.js?54eb:189 detachEventHandlers
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:251 render
Select2.js?54eb:67 componentWillReceiveProps
Select2.js?54eb:104 updSelect2
Select2.js?54eb:189 detachEventHandlers
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:251 render
Select2.js?54eb:67 componentWillReceiveProps
Select2.js?54eb:104 updSelect2
Select2.js?54eb:189 detachEventHandlers
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:251 render
Select2.js?54eb:67 componentWillReceiveProps
Select2.js?54eb:104 updSelect2
Select2.js?54eb:189 detachEventHandlers
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:251 render
Select2.js?54eb:74 componentDidUpdate
Select2.js?54eb:199 prepareValue
Select2.js?54eb:136 updateValue
Select2.js?54eb:156 fuzzyValuesEqual
Select2.js?54eb:74 componentDidUpdate
Select2.js?54eb:199 prepareValue
Select2.js?54eb:136 updateValue
Select2.js?54eb:156 fuzzyValuesEqual
Select2.js?54eb:74 componentDidUpdate
Select2.js?54eb:199 prepareValue
Select2.js?54eb:136 updateValue
Select2.js?54eb:156 fuzzyValuesEqual
Select2.js?54eb:74 componentDidUpdate
Select2.js?54eb:199 prepareValue
Select2.js?54eb:136 updateValue
Select2.js?54eb:156 fuzzyValuesEqual
Select2.js?54eb:74 componentDidUpdate
Select2.js?54eb:199 prepareValue
Select2.js?54eb:136 updateValue
Select2.js?54eb:156 fuzzyValuesEqual
Select2.js?54eb:67 componentWillReceiveProps
Select2.js?54eb:104 updSelect2
Select2.js?54eb:189 detachEventHandlers
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:251 render
Select2.js?54eb:67 componentWillReceiveProps
Select2.js?54eb:104 updSelect2
Select2.js?54eb:189 detachEventHandlers
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:251 render
Select2.js?54eb:67 componentWillReceiveProps
Select2.js?54eb:104 updSelect2
Select2.js?54eb:189 detachEventHandlers
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:251 render
Select2.js?54eb:67 componentWillReceiveProps
Select2.js?54eb:104 updSelect2
Select2.js?54eb:164 destroySelect2
Select2.js?54eb:89 initSelect2
Select2.js?54eb:211 prepareOptions
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:189 detachEventHandlers
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:251 render
Select2.js?54eb:67 componentWillReceiveProps
Select2.js?54eb:104 updSelect2
Select2.js?54eb:189 detachEventHandlers
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:251 render
Select2.js?54eb:74 componentDidUpdate
Select2.js?54eb:199 prepareValue
Select2.js?54eb:136 updateValue
Select2.js?54eb:156 fuzzyValuesEqual
Select2.js?54eb:74 componentDidUpdate
Select2.js?54eb:199 prepareValue
Select2.js?54eb:136 updateValue
Select2.js?54eb:156 fuzzyValuesEqual
Select2.js?54eb:74 componentDidUpdate
Select2.js?54eb:199 prepareValue
Select2.js?54eb:136 updateValue
Select2.js?54eb:156 fuzzyValuesEqual
Select2.js?54eb:74 componentDidUpdate
Select2.js?54eb:199 prepareValue
Select2.js?54eb:136 updateValue
Select2.js?54eb:156 fuzzyValuesEqual
Select2.js?54eb:74 componentDidUpdate
Select2.js?54eb:199 prepareValue
Select2.js?54eb:136 updateValue
Select2.js?54eb:156 fuzzyValuesEqual
Select2.js?54eb:67 componentWillReceiveProps
Select2.js?54eb:104 updSelect2
Select2.js?54eb:189 detachEventHandlers
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:251 render
Select2.js?54eb:67 componentWillReceiveProps
Select2.js?54eb:104 updSelect2
Select2.js?54eb:189 detachEventHandlers
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:251 render
Select2.js?54eb:67 componentWillReceiveProps
Select2.js?54eb:104 updSelect2
Select2.js?54eb:164 destroySelect2
Select2.js?54eb:89 initSelect2
Select2.js?54eb:211 prepareOptions
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:189 detachEventHandlers
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:251 render
Select2.js?54eb:67 componentWillReceiveProps
Select2.js?54eb:104 updSelect2
Select2.js?54eb:189 detachEventHandlers
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:251 render
Select2.js?54eb:67 componentWillReceiveProps
Select2.js?54eb:104 updSelect2
Select2.js?54eb:189 detachEventHandlers
Select2.js?54eb:177 attachEventHandlers
Select2.js?54eb:251 render
Select2.js?54eb:74 componentDidUpdate
Select2.js?54eb:199 prepareValue
Select2.js?54eb:136 updateValue
Select2.js?54eb:156 fuzzyValuesEqual
Select2.js?54eb:74 componentDidUpdate
Select2.js?54eb:199 prepareValue
Select2.js?54eb:136 updateValue
Select2.js?54eb:156 fuzzyValuesEqual
Select2.js?54eb:74 componentDidUpdate
Select2.js?54eb:199 prepareValue
Select2.js?54eb:136 updateValue
Select2.js?54eb:156 fuzzyValuesEqual
Select2.js?54eb:74 componentDidUpdate
Select2.js?54eb:199 prepareValue
Select2.js?54eb:136 updateValue
Select2.js?54eb:156 fuzzyValuesEqual
Select2.js?54eb:74 componentDidUpdate
Select2.js?54eb:199 prepareValue
Select2.js?54eb:136 updateValue
Select2.js?54eb:156 fuzzyValuesEqual

gazpachu avatar Mar 28 '17 12:03 gazpachu

I think the issue is just with one of the select2, the one that has a data array of 2000 items. It seems that when loading it for the first time, it's fine, but when the data changes, then it crashes the app

gazpachu avatar Mar 28 '17 13:03 gazpachu

Thanks for the details. I'll check it out.

rkit avatar Mar 28 '17 16:03 rkit

Someone know how to optimize this for large dataset ? Having same problems with ~ 7000 items list

k-zakhariy avatar Sep 29 '17 11:09 k-zakhariy