Dash: [Feature Request] React.Fragment in Dash?

[KyleKing]

Starting React 16, you can use React.Fragments to avoid unnecessary divs. Is there a way to do this in Dash?

From the getting started guide, app.layout = html.Div(children=[...])
creates an unnecessary <div>...</div> element, which would instead be a Fragment if written directly in React.

Pretty low priority, but wondered if there was a best practice to avoid this or if Fragments could be used in Dash

Full example below:

# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

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

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),

    dcc.Graph(
        id='example-graph',
        figure={
            'data': [
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
            ],
            'layout': {
                'title': 'Dash Data Visualization'
            }
        }
    )
])

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

[alexcjohnson]

Interesting - we could certainly add a dcc.Fragment or something. But if the use case is just the top-level component, we could also possibly allow app.layout to be a list of components, rather than always a single component. Just like we do with children props.

[byronz]

we actually did some minor adoption of dcc.Fragment directly in dash-renderer, but on python side, it's more about a paradigm discussion.

[KyleKing]

@byronz I looked again through the dash-renderer and didn't see a reference to Fragments. What was the decision about adoption of it?

Being able to call dcc.Fragment(children=[...]) instead of html.Div(children=[...]) would be ideal. I make a lot of little layout modules that get organized into a main layout, so it would really clean up the created HTML

[byronz]

@KyleKing dash-renderer has been merged into main dash repo now, https://github.com/plotly/dash/blob/master/dash-renderer/src/AppContainer.react.js#L35-L41

there is no big reason behind that, as we migrate to React16, some of the container code inside renderer can be optimized a little bit with fragments.