Keeping Dash Multi-pages persistent via callback state and store?


So I have been trying to figure out how to keep my components from disappearing when I change pages and return to the original page. From what I understand dash re-renders the list that was explicitly defined in the script. for instance there’s 3 pages:

  • Dashboard
  • Analysis
  • Resource

in Dashboard there is:

dashboard_layout = html.Div([
html.Div(id = "more_potato"),
dbc.Button("gib me more potatoes!!", id="potato_button")]

Output("more_potato", "children"),
Input("potato_button", "n_clicks")
def rip(n):
   if n is not None:
      return "you have {} potatoes".format(n)
  else: PreventUpdate

The problem is once I leave Dashboard and come back to it “you have 5 potatoes” is gone. My guess is that dash reloads dashboard_layout list again. I know people mentioned states but none of the post I’ve seen talked about how it’s but done only saying it’s hard to do.

I want to ask the community how it’s done… how the structure works. Obviously this is a simplistic example but it would be useful especially if I have to make users upload a dataset and dash generates a data table.