Multi-Page app moves data (state?) across pages


I have a very basic two-page app: a header with links to the apps with a single textarea in each of them that load under the header.


from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

from apps import extract_app, test_app
from app import app

# Header Menu
header_layout = [
    dcc.Location(id="url", refresh=False),
    html.Nav([dcc.Link("Extract", href="/extract"),
             html.Span(" | "),
             dcc.Link("Test", href="/test")],

# Content
app.layout = html.Div([
    html.Div(header_layout, id='page-header'),

@app.callback(Output('page-content', 'children'),
              [Input('url', 'pathname')])
def display_page(pathname):
    if pathname == '/extract':
        return extract_app.layout
    elif pathname == '/test':
        return test_app.layout
        return test_app.layout

if __name__ == '__main__':

And two apps in the apps folder

import dash_core_components as dcc

layout = dcc.Textarea(id='extract-textarea', placeholder='Extract Placeholder.')


import dash_core_components as dcc

layout = dcc.Textarea(id='test-textarea', placeholder='Test Placeholder.')

If you type some text in e.g. test_app test-textarea and use the menu dcc.Link to switch to extract_app, the text is automatically transferred to extract-textarea, which is not a desirable behavior for me. However, if I wrap one of the textareas in html.Div(), this doesn’t happen.

This is a very simplified version of a problem I am describing. For example if I have 100 spans (a custom core core component created using react, not html.Span) with custom class-names, and I dynamically replace these with another 100 spans using a callback, the old classNames are transferred to the new spans, in the exact same order, although the new spans are not supposed to have any classNames.

Is this related to caching? I would appreciate if someone could point towards the right direction.