# Dash Renderer very slow at Callback

**URL:** <https://community.plotly.com/t/dash-renderer-very-slow-at-callback/25431>\
**Category:** Dash Python\
**Created:** [July 4, 2019, 9:41am UTC](https://community.plotly.com/t/dash-renderer-very-slow-at-callback/25431 "2019-07-04T09:41:45Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![chrisbo](https://avatars.discourse-cdn.com/v4/letter/c/8baadc/32.png) [@chrisbo](https://community.plotly.com/u/chrisbo)\
**Post date:** [July 4, 2019, 9:41am UTC](https://community.plotly.com/t/dash-renderer-very-slow-at-callback/25431/1 "2019-07-04T09:41:45Z")

</div>

The React renderer takes ages too add 100k “html.Divs” to the app.layout when using a callback.  
Do you guys have an hint, what I could do to improve the performance?

My current code:

```
# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State

app = dash.Dash( __name__ )

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),
    html.Button('Add more', id='button'),
    dcc.Loading(
        html.Div(id='output-data-upload'),
        id="loading",
        type="default",
        )

    ])

### Button Callback
@app.callback(
    Output('output-data-upload', 'children'),
    [Input('button', 'n_clicks')])
def update_output(n_clicks):
    if n_clicks != None:
        divs = []

        for i in range(0,100000):
            divs.append(html.Div(i))

        return divs

if __name__ == ' __main__':
    app.run_server(debug=True)

```

Thanks very much in advance!

---

<div class="post-metadata">

**Author:** ![byronz](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/byronz/32/5727_2.png) [@byronz](https://community.plotly.com/u/byronz)\
**Post date:** [July 4, 2019, 7:53pm UTC](https://community.plotly.com/t/dash-renderer-very-slow-at-callback/25431/2 "2019-07-04T19:53:17Z")

</div>

@chrisbo

 ![46%20PM](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/f/f31251b79b72fd58470ce1763dfc7bcecb28d3b0.png)

it’s mostly network cost in this case, try clientside callback to avoid the traffic [📣 Dash 0.41.0 released](https://community.plotly.com/t/dash-0-41-0-released/22131)

---

<div class="post-metadata">

**Author:** ![byronz](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/byronz/32/5727_2.png) [@byronz](https://community.plotly.com/u/byronz)\
**Post date:** [July 4, 2019, 7:57pm UTC](https://community.plotly.com/t/dash-renderer-very-slow-at-callback/25431/3 "2019-07-04T19:57:36Z")

</div>

also post the code in correct format

```python

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

app = dash.Dash( __name__ )

app.layout = html.Div(
    children=[
        html.H1(children="Hello Dash"),
        html.Div(
            children="""
        Dash: A web application framework for Python.
    """
        ),
        html.Button("Add more", id="button"),
        dcc.Loading(
            html.Div(id="output-data-upload"), id="loading", type="default"
        ),
    ]
)

@app.callback(
    Output("output-data-upload", "children"), [Input("button", "n_clicks")]
)
def update_output(n_clicks):
    if n_clicks != None:
        return [html.Div(i) for i in range(0, 100000)]

if __name__ == " __main__":
    app.run_server(debug=True)

```

---

<div class="post-metadata">

**Author:** ![chrisbo](https://avatars.discourse-cdn.com/v4/letter/c/8baadc/32.png) [@chrisbo](https://community.plotly.com/u/chrisbo)\
**Post date:** [July 5, 2019, 7:18am UTC](https://community.plotly.com/t/dash-renderer-very-slow-at-callback/25431/4 "2019-07-05T07:18:30Z")

</div>

Hi byronz,

thank you very much for the hint with clientside callbacks.  
I tried following code, which is much faster.

**module1.py :**

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

app = dash.Dash( __name__ )

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),
    html.Button('Add more', id='button'),
    dcc.Loading(
        html.Div(id='output-data-upload'),
        id="loading",
        type="default",
        )

    ])

app.clientside_callback(
    ClientsideFunction(
        namespace='clientside',
        function_name='add_divs'
    ),
    Output('output-data-upload', 'children'),
    [Input('button', 'n_clicks')]
)

if __name__ == " __main__":
    app.run_server(debug=True)

```

**clientside.js :**

```
if (!window.dash_clientside) { window.dash_clientside = {}; }
window.dash_clientside.clientside = {
    add_divs: function (value) {

        for (i = 0; i < 10000; i++) {
            
            var div = document.createElement("div");
            div.style.background = "red";
            div.style.color = "white";
            div.innerHTML = i;

            document.getElementById("output-data-upload").appendChild(div);
        }
        
    }
}

```

On loading I get following error:  
 ![000011](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/0/01a88d3d29d94f39f782830bbfec8aaeaeb9bad8.jpeg)

Seems like the DOM element “output-data-upload” has not rendered yet while loading. What can I do to fix that issue?

---

<div class="post-metadata">

**Author:** ![byronz](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/byronz/32/5727_2.png) [@byronz](https://community.plotly.com/u/byronz)\
**Post date:** [July 5, 2019, 4:23pm UTC](https://community.plotly.com/t/dash-renderer-very-slow-at-callback/25431/5 "2019-07-05T16:23:58Z")

</div>

@chrisbo

if you look at chris’ examples [https://github.com/plotly/dash-renderer/commit/5b9934d17851f467321b80eb9bc198e16b678251](https://github.com/plotly/dash-renderer/commit/5b9934d17851f467321b80eb9bc198e16b678251). the purpose of the client callback is not to manipulate directly the DOM, but write directly the output. i.e. the `add_divs` returns a string contains 10000 divs html tags with numbers.

---

<div class="post-metadata">

**Author:** ![chrisbo](https://avatars.discourse-cdn.com/v4/letter/c/8baadc/32.png) [@chrisbo](https://community.plotly.com/u/chrisbo)\
**Post date:** [July 5, 2019, 8:04pm UTC](https://community.plotly.com/t/dash-renderer-very-slow-at-callback/25431/6 "2019-07-05T20:04:45Z")

</div>

can you please give me a short example how this javascript clientside return string should look like in my case?  
In chris’ examples the html Tags are already created in python. he does not create them in the clientside callback.

I tried:

```
if (!window.dash_clientside) { window.dash_clientside = {}; }
window.dash_clientside.clientside = {
    add_divs: function (n_clicks) {

return "html.Div('Hello World')"
        
    }
}

```

which did not work out.  
Thanks a lot buddy!

---

<div class="post-metadata">

**Author:** ![byronz](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/byronz/32/5727_2.png) [@byronz](https://community.plotly.com/u/byronz)\
**Post date:** [July 5, 2019, 8:29pm UTC](https://community.plotly.com/t/dash-renderer-very-slow-at-callback/25431/7 "2019-07-05T20:29:03Z")

</div>

try pure html tag `<div> number value as your example </div>`

---

<div class="post-metadata">

**Author:** ![chrisbo](https://avatars.discourse-cdn.com/v4/letter/c/8baadc/32.png) [@chrisbo](https://community.plotly.com/u/chrisbo)\
**Post date:** [July 5, 2019, 8:34pm UTC](https://community.plotly.com/t/dash-renderer-very-slow-at-callback/25431/8 "2019-07-05T20:34:25Z")

</div>

unfortunately does not work either ☹

---

<div class="post-metadata">

**Author:** ![chrisbo](https://avatars.discourse-cdn.com/v4/letter/c/8baadc/32.png) [@chrisbo](https://community.plotly.com/u/chrisbo)\
**Post date:** [July 8, 2019, 12:13pm UTC](https://community.plotly.com/t/dash-renderer-very-slow-at-callback/25431/9 "2019-07-08T12:13:19Z")

</div>

does anyone have another hint?

---

<div class="post-metadata">

**Author:** ![Damian](https://avatars.discourse-cdn.com/v4/letter/d/34f0e0/32.png) [@Damian](https://community.plotly.com/u/Damian)\
**Post date:** [July 8, 2019, 2:35pm UTC](https://community.plotly.com/t/dash-renderer-very-slow-at-callback/25431/10 "2019-07-08T14:35:07Z")

</div>

> [@chrisbo](#):
>
> does anyone have another hint?

I suspect you should return a dash\_html\_component Div object instead of directly trying to manipulate the real DOM (which presumably will conflict with the React DOM).

However my JavaScript skills are currently very weak so I wasn’t able to figure out how to import the Div object from Dash after 15 mins of playing around. If I get some more time I’ll do so more reading and try again.

---

<div class="post-metadata">

**Author:** ![byronz](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/byronz/32/5727_2.png) [@byronz](https://community.plotly.com/u/byronz)\
**Post date:** [July 8, 2019, 2:56pm UTC](https://community.plotly.com/t/dash-renderer-very-slow-at-callback/25431/11 "2019-07-08T14:56:44Z")

</div>

@chrisbo I had some time this morning to play around with your example. So the pure html way won’t work as they are just strings for the parent div.children. The callback way does save a lot of bandwidth if you have a large data set, i.e. you just dump a text from 0 to 10000000000. But if your purpose is to play with the limit of number of components, we might need something else to optimize that. @chriddyp might have more thoughts on this.

---

<div class="post-metadata">

**Author:** ![aandres](https://avatars.discourse-cdn.com/v4/letter/a/bc79bd/32.png) [@aandres](https://community.plotly.com/u/aandres)\
**Post date:** [July 8, 2019, 3:38pm UTC](https://community.plotly.com/t/dash-renderer-very-slow-at-callback/25431/12 "2019-07-08T15:38:44Z")

</div>

What version of dash are you using?

I’ve noticed that since upgrading to 1.0.0, displaying big elements (in my case html tables with ~1000 rows, 75kb of data) is very slow.

When debugging in the browser, it shows that most of the time is spent in “content download”, but when I look in the WSGI logs, the query response time are all much lower than what I see in the browser which is weird. Does the “content download” include the rendering time? In which case maybe that part has got slower.

---

<div class="post-metadata">

**Author:** ![aandres](https://avatars.discourse-cdn.com/v4/letter/a/bc79bd/32.png) [@aandres](https://community.plotly.com/u/aandres)\
**Post date:** [August 8, 2019, 2:39pm UTC](https://community.plotly.com/t/dash-renderer-very-slow-at-callback/25431/13 "2019-08-08T14:39:09Z")

</div>

FYI, there’s a ticket for this issue: [https://github.com/plotly/dash/issues/707](https://github.com/plotly/dash/issues/707)

---

<div class="post-metadata">

**Author:** ![agarzon](https://avatars.discourse-cdn.com/v4/letter/a/838e76/32.png) [@agarzon](https://community.plotly.com/u/agarzon)\
**Post date:** [October 17, 2019, 3:57pm UTC](https://community.plotly.com/t/dash-renderer-very-slow-at-callback/25431/14 "2019-10-17T15:57:36Z")

</div>

Hi @byronz, which is the tool you use in this post to get time executions?

Thanks you.

---

<div class="post-metadata">

**Author:** ![byronz](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/byronz/32/5727_2.png) [@byronz](https://community.plotly.com/u/byronz)\
**Post date:** [October 17, 2019, 4:14pm UTC](https://community.plotly.com/t/dash-renderer-very-slow-at-callback/25431/15 "2019-10-17T16:14:14Z")

</div>

@agarzon that’s from the native chrome dev tools

---

<div class="post-metadata">

**Author:** ![mail8](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mail8/32/31560_2.png) [@mail8](https://community.plotly.com/u/mail8)\
**Post date:** [September 15, 2021, 7:42pm UTC](https://community.plotly.com/t/dash-renderer-very-slow-at-callback/25431/16 "2021-09-15T19:42:43Z")

</div>

Just updated to

```
- dash==2.0.0
- dash-bootstrap-components==0.13.0
- dash-core-components==2.0.0
- dash-extensions==0.0.60
- dash-html-components==2.0.0
- dash-table==5.0.0
- dash-tabulator==0.4.2

```

Now, dash is extremely slow in production and development.

---

<div class="post-metadata">

**Author:** ![Emil](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/emil/32/31734_2.png) [@Emil](https://community.plotly.com/u/Emil)\
**Post date:** [September 15, 2021, 7:54pm UTC](https://community.plotly.com/t/dash-renderer-very-slow-at-callback/25431/17 "2021-09-15T19:54:32Z")

</div>

Interesting. Did you measure the difference between the previous version and 2.0?