Black Lives Matter. Please consider donating to Black Girls Code today.

Avoiding redundant rendering with complicated interaction dependencies

I have a dash app which uses a number of components to select an image. When I use one of those components, the (same) image renders multiple times, presumably because of the complicated dependencies.

image

Are there best practices or design philosophies which would help eliminate this kind of problem? I’d rather not have to “gate” the output by adding an “update” button.

Thanks for reporting! This looks like it would be a bug. I’ve updated some of this logic in recent versions of dash-renderer (see changelog: https://github.com/plotly/dash-renderer/blob/master/CHANGELOG.md). I believe that the bug fixes from 0.9.0 should have fixed this issue. Could you check what version you are on?

import dash_renderer
print(dash_renderer.__version__)

I tried to replicate this (on v0.11.0) with the following example but was unable to: updating the “grandparent” component indeed updated “parent-a” and “parent-b” but the “child” was only updated once “parent-a” and “parent-b” were finished.

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

app = dash.Dash()
app.layout = html.Div([
    dcc.Dropdown(
        id='grandparent',
        options=[{'label': i, 'value': i} for i in range(5)],
        value=0
    ),
    html.Div(id='parent-a'),
    html.Div(id='parent-b'),
    html.Div(id='child')
])


@app.callback(Output('parent-a', 'children'), [Input('grandparent', 'value')])
def update_parent_a(value):
    print('update_parent_a')
    return 'Parent A with {}'.format(value)


@app.callback(Output('parent-b', 'children'), [Input('grandparent', 'value')])
def update_parent_b(value):
    print('update_parent_b')
    return 'Parent B with {}'.format(value)


@app.callback(Output('child', 'children'),
              [Input('parent-a', 'children'),
               Input('parent-b', 'children')])
def update_child(parent_a, parent_b):
    print('update_child')
    return 'Child with "{}" and "{}"'.format(parent_a, parent_b)


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

You were right, I had been forgetting to upgrade dash_renderer with everything else and was on version 0.7.4. I’ve updated to 0.12.0rc1 and it updates correctly now. Thanks!

1 Like

:sweat_smile: Great, glad that fixed things for you!

ICYMI - https://plot.ly/dash/installation is always updated with the latest versions and you can always check out the CHANGELOG.md file in each of the repos for a list of changes.

Thanks again for reporting!