Dash Maintain Component State on Page Change

Dash Python
1

I am having trouble with a use case. I have a app of tabs where the user looks at and analyses data, then they click on a button to change page into a report layout for printing, and everything works fine till here, I am able to maintain the states of the components they were using previously.

But then when I want to got back to the original page and reload in the tab format whilst maintaining the state nothing happens and I only get this error in the console

“”"
Warning: Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
“”

My Dash callback is like so, w/ the commented parts being what was not working so I worked around and just had to reload the original page instead.

@app.callback(Output('DISPLAY', 'children'),
             [Input('tab-view-button', 'n_clicks'),
              Input('report-view-button', 'n_clicks')],
             [State('CONTENT0', 'children'),
              State('CONTENT1', 'children'),
              State('CONTENT2', 'children'),
              State('CONTENT3', 'children'),
              State('CONTENT4', 'children')])
def VIEW_TYPES(tab_click, report_click, C0, C1, C2, C3, C4):
    C0 = html.Div(id='CONTENT0',children=C0)
    C1 = html.Div(id='CONTENT1',children=C1)
    C2 = html.Div(id='CONTENT2',children=C2)
    C3 = html.Div(id='CONTENT3',children=C3)
    C4 = html.Div(id='CONTENT4',children=C4)
    if (report_click is not None and report_click != 0):
         PAGE0 = html.Div(id='PAGE0', children=C0, style={'display':'none'})
         PAGE1 = html.Div(id='PAGE1', children=C1)
         PAGE2 = html.Div(id='PAGE2', children=C2)
         PAGE3 = html.Div(id='PAGE3', children=C3)
         PAGE4 = html.Div(id='PAGE4', children=C4, style={'display':'none'})
         REPORT_VIEW =  html.Div([PAGE0,PAGE1,PAGE2,PAGE3,PAGE4])
         return REPORT_VIEW
#    elif (tab_click is not None and tab_click != 0):
#         TAB0 = dcc.Tab(id='TAB0', label='Setup', children=C0)
#         TAB1 = dcc.Tab(id='TAB1', label='Top 10s', children=C1)
#         TAB2 = dcc.Tab(id='TAB2', label='Severity Graphs', children=C2)
#         TAB3 = dcc.Tab(id='TAB3', label='Severity Tables', children=C3)
#         TAB4 = dcc.Tab(id='TAB4', label='Categories', children=C4)
#         TAB_VIEW = dcc.Tabs(children=[TAB0,TAB1,TAB2,TAB3,TAB4])
#         return TAB_VIEW
    else:
         return TAB_VIEW

can anyone advise on this please?

2

Persistence is built-in Dash: Persisting User Preferences & Control Values | Dash for Python Documentation | Plotly

It’s available for dcc components, but for other components you might need to add it. In this case I think the persistence_typecould be "local"