Black Lives Matter. Please consider donating to Black Girls Code today.

Difference in sharing data between callbacks with hidden divs and dcc.Store?

I am not too familiar with the technical side of using hidden divs vs dcc.Store when sharing data between callbacks, so I was wondering what exactly the differences are between those 2 methods.

Is one more efficient than the other? Any advantages to each method? Or is it basically the same?

2 Likes

short answer: use dcc.Store

longer answer: hidden divs was a workaround before we created dcc.Store. They require adding the data to the DOM (which has some overhead even if the div is not displayed), and they can only store data that’s valid as the children prop - in principle, just strings or arrays of strings. dcc.Store has no DOM overhead, can store arbitrary JSON, and can also use localStorage or sessionStorage to persist across redraws.

4 Likes

Thank you for the answer @alexcjohnson

Looks like I will be replacing all my hidden divs with dcc.Store from now on.

I feel like this could be added to the dash documentation. Currently there is this https://dash.plot.ly/sharing-data-between-callbacks which gives an example using hidden divs. It was never clear to me why this was shown in the user guide when dcc.Store memory storage exists and seems more clear to use than a div container.

3 Likes