✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🧬 Learn how to build RNA-Seq data apps with Python & Dash. Register for the May 20 Webinar!

Multiple Page renders on app restart+reconnect

I was noticing that some simple pages were loading extremely slowly and figured the problem had to be something on my side. Upon further debugging, I have isolated the behavior to the Dash framework itself. This problem can be replicated on both Linux and OSX and with FireFox and Chrome connections using the following Dash packages:

dash 1.13.3
dash-bootstrap-components 0.10.2
dash-core-components 1.10.1
dash-html-components 1.0.3

I am running the Simple Sidebar example from https://dash-bootstrap-components.opensource.faculty.ai/examples/simple-sidebar/ with the only changes being the following print statement:

def render_page_content(pathname):
    print(pathname)

and a host definition in the execution statement. This behavior occurs with or without debug=True but the output is cleaner with it True. This doesn’t occur when host is undefined/localhost.

if __name__ == "__main__":
    app.run_server(host='0.0.0.0', port=7001, debug=True)

So I start the app and run it the first time. Watching the output, you can see one print statement get executed with each page click and the page instantly renders:

bash-3.2$ python example1.py 
Dash is running on http://0.0.0.0:7001/

 Warning: This is a development server. Do not use app.run_server
 in production, use a production WSGI server like gunicorn instead.

 * Serving Flask app "example1" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: on
None
/
/page-2
/page-3
/page-2
/page-1
/page-2
/page-3

When the app is restarted, two lines are printed for each browser instance that reconnects (first None and /page-3 shown below). The problem is that from that point on you see two page render statements firing for most page clicks.

Dash is running on http://0.0.0.0:7001/

 Warning: This is a development server. Do not use app.run_server
 in production, use a production WSGI server like gunicorn instead.

 * Serving Flask app "example1" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: on
None
/page-3  

/page-2
/page-2
/page-1
/page-1
/page-2
/page-2
/page-3
/page-2
/page-2

On the third restart you can get up to three prints per click and so on. In an active development environment with several tabs open and several restarts, pretty soon each page click is firing 5-10 times and operating much more slowly than the first connection even with simple text-only pages, and substantially slower when queries are involved. The only way to get back to normal is to kill and restart the browser tabs.

Please let me know if this is a bug in the Framework or if there is a change to make so that each page always renders a single time like it does on the first start+connection. This might not be that big of a problem with a stable app in deployment (no such restarts), but while developing, our apps get restarted every few minutes.