Setting React 18 in Dash 2.17

Dash Python
1

Hi everyone,
Currently we are at Dash 2.15.
We are planning to have Dash 2.17 - so two minor releases from now - change the default React version from 16.14.0 to 18.2.0.

Before we make this move, we would like to ask the community – and especially Dash Community Component authors – if you expect any issues?

Note that Dash will still have support for React 16.14.0 built in. So if you have any issues with React 18, you can revert to React 16 either by setting the environment variable REACT_VERSION=16.14.0 before running your app, or inside your app you can call dash._dash_renderer._set_react_version("16.14.0").

1 Like
3

Figure I’d mention dash==2.16.0 breaks dash-leaflet so I’m assuming so will dash 2.17.0 @Emil

4

hi @PipInstallPython
Thanks for letting us know. Can you please point me to an example where Dash 2.16 breaks Dash-leaflet? I saw this github issue regarding Dash 2.16 breaking dmc, but I heard that the latest dash 2.16 is potentially breaking other dash-based libraries.

I tried this dash-leaflet app, but it works for both dash 2.15 and 2.16.

from dash import Dash, html, dcc, Input, Output
import dash_leaflet as dl
import pandas as pd
import os
from dotenv import load_dotenv
import urllib.request

# # Load historic wildfile data -------------------------------------------
df = pd.read_csv('https://raw.githubusercontent.com/oferreirap/wildfires_data_app/main/Data/modis_2022_Colombia.csv')
df = df.iloc[30190:]  # last day of 2022 (December 31)


# Function to determine the color of market based on brightness
def get_color(brightness):
    if brightness < 310:
        return 'blue'
    elif 310 <= brightness < 330:
        return 'purple'
    elif 330 <= brightness < 350:
        return 'orange'
    else:
        return 'yellow'

# Add a 'color' column to the dataframe based on the 'brightness' value
df['color'] = df['brightness'].apply(get_color)

# Initialize the Dash app
app = Dash()

# App layout
app.layout = html.Div([
    html.H1("Fires in Colombia"),
    dl.Map(style={'width': '1000px', 'height': '500px'}, center=[4.5709, -74.2973], zoom=5, children=[
        dl.TileLayer(),
        # Use list comprehension to create markers for each fire location
        dl.LayerGroup(
            [
                dl.CircleMarker(center=[row['latitude'], row['longitude']],
                                radius=5,
                                color=row['color'],
                                fill=True,
                                fillOpacity=0.7,
                                children=[
                                    dl.Tooltip(
                                        f"Brightness: {row['brightness']}")
                                ])
                for index, row in df.iterrows()
            ]
        )
    ])
])

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

The more I look into it, I’m starting to believe the issue is regarding to pages and leaflet. This is the broken screenshot of what I was experiencing when upgrading to 2.16.0:

image
image1915×1044 78.7 KB

The app you sent worked fine when loaded on app.py but when I added pages=True it broke, with
suppress_callback_exceptions=True it works with pages just fine. Just figured it might be worth a mention.

2 Likes
6

Dash 2.16.1 is now available :tada:

This fixes the issue with dependencies not found.

4 Likes
7

Thanks for sharing @AnnMarieW
To add to Ann’s announcementt, if anyone is interested in some of the reasoning behind this move, see issue #2783.

8

Did this end up happening?
I’m having issues with dmc and both 2.16.1 and 2.17.0.

9

Dmc had an update recently and a lot of components changed. You can just pip install dash-mantine-components 0.13 or look at documentation for 0.14 and change your components to fit the new structure.