Hi,
I am currently trying to create a multipage app including a dash table and am experiencing weird behaviour of my app.
Whenever I switch between the pages of my app a couple of times I get the following warning by my browser (Firefox):
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.
in l (created by s)
in s (created by u)
in div (created by u)
in u (created by c)
in c (created by s)
in s (created by c)
in Suspense (created by c)
in c (created by CheckedComponent)
in CheckedComponent (created by BaseTreeContainer)
in ComponentErrorBoundary (created by BaseTreeContainer)
in BaseTreeContainer (created by Context.Consumer)
in Unknown (created by BaseTreeContainer)
I reduced my app to the point that I used an example from the plotly documentation to which I only added a dash table. I did not change anything else. The warning still appears.
I used the example given in the section “Dynamically Create a Layout for Multi-Page App Validation” from https://dash.plotly.com/urls
Can anyone help me with that?
from dash import Dash, html, dcc, Input, Output, State, callback, dash_table
import pandas as pd
# create example data as dict
data = {
"numbers": [1,2,3,4,5,6,7,8,9],
"cities": ["Frankfurt", "Kassel", "Darmstadt", "Wiesbaden", "GieĂźen", "Fulda", "Hanau", "Dieburg", "Limburg"],
}
# load data into a DataFrame object
df = pd.DataFrame(data)
app = Dash(__name__)
url_bar_and_content_div = html.Div([
dcc.Location(id='url', refresh=False),
html.Div(id='page-content')
])
layout_index = html.Div([
dcc.Link('Navigate to "/page-1"', href='/page-1'),
html.Br(),
dcc.Link('Navigate to "/page-2"', href='/page-2'),
])
layout_page_1 = html.Div([
html.H2('Page 1'),
dcc.Input(id='input-1-state', type='text', value='Montreal'),
dcc.Input(id='input-2-state', type='text', value='Canada'),
# add dash table to page 1
dash_table.DataTable(
df.to_dict('records'), [{"name": i, "id": i} for i in df.columns],
page_size=6,
style_table={"overflowX": "scroll"},
id="dash-data-table",
sort_action="native",
),
html.Button(id='submit-button', n_clicks=0, children='Submit'),
html.Div(id='output-state'),
html.Br(),
dcc.Link('Navigate to "/"', href='/'),
html.Br(),
dcc.Link('Navigate to "/page-2"', href='/page-2'),
])
layout_page_2 = html.Div([
html.H2('Page 2'),
dcc.Dropdown(['LA', 'NYC', 'MTL'], 'LA', id='page-2-dropdown'),
html.Div(id='page-2-display-value'),
html.Br(),
dcc.Link('Navigate to "/"', href='/'),
html.Br(),
dcc.Link('Navigate to "/page-1"', href='/page-1'),
])
# index layout
app.layout = url_bar_and_content_div
# "complete" layout
app.validation_layout = html.Div([
url_bar_and_content_div,
layout_index,
layout_page_1,
layout_page_2,
])
# Index callbacks
@callback(Output('page-content', 'children'),
Input('url', 'pathname'))
def display_page(pathname):
if pathname == "/page-1":
return layout_page_1
elif pathname == "/page-2":
return layout_page_2
else:
return layout_index
# Page 1 callbacks
@callback(Output('output-state', 'children'),
Input('submit-button', 'n_clicks'),
State('input-1-state', 'value'),
State('input-2-state', 'value'))
def update_output(n_clicks, input1, input2):
return f'The Button has been pressed {n_clicks} times. \
Input 1 is {input1} and Input 2 is {input2}'
# Page 2 callbacks
@callback(Output('page-2-display-value', 'children'),
Input('page-2-dropdown', 'value'))
def display_value(value):
return f'You have selected {value}'
if __name__ == '__main__':
app.run_server(debug=True)
