Large Memory Footprint in dcc.Dropdown component

Dash Python
1

Has anyone experienced a very large memory footprint attributable to (potentially) the options prop of the dcc.Dropdown component?
I have observed that having a large string for the label and a simple value results in a massive JavaScript memory amount for the app.

In my example, there were approximately 600 options, and the label was set to something like "Label 1 : {}, Label 2: {}, Label 3 : {}," …

The dcc.Dropdown components search ability is pretty awesome, but could this be the culprit? (creating a large search tree or something?)

2

Having the same exact issue. I am also dynamically changing the options via a callback which occasionally causes the chrome tab to crash with an out of memory message. Seems like either I am using it in an unintended way or something is wrong with the component…?

Edit:
I was able to stop the crashing by setting

searchable=False

However the memory usage is still about 1gb with the dropdown vs 200mb without. I only have maybe max 200 options in the dropdown although each one has a label which is a very long string.

3

We do create an index… that could be causing the issue: dash-core-components/src/fragments/Dropdown.react.js at 7fd30276347f0bef29ce41b7a042abb7e57977b6 · plotly/dash-core-components · GitHub

As an alternative, I recommend using server-side rendered options. See “Dynamic Options” in Dropdown | Dash for Python Documentation | Plotly

4

I believe that when I tried to debug what was causing the memory crash it was decoding some token when it ran out of memory. I will look into the dynamic options however I don’t think it will work as I have two dropdowns. Dropdown A causes dropdown B options to change when the selection in A changes. My primary issue now is the massive memory usage relative to the array of options I pass in.