1.0.4-beta3 _syncSubtreeselect2 freezes the browser

[gazpachu]

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

This is the CPU profile:

Any idea of what could be causing this issue?

[gazpachu]

@rkit any idea?

[rkit]

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

[gazpachu]

@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]

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]

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

[rkit]

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

[k-zakhariy]

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