Use React version 18.2

[klar-C]

Hi,

I posted this initially on the plotly forums but I imagine this might be a better place for it.

Is there any way to force Dash to use a newer version of React? Or is there any time-line as to update Dash to run with 18.2?

The main reason I’m asking is that e.g. Aggrid (and some other libraries) seem to have worse render performance for large tables under 16.4 versus 18.2.

As a test I created a component (through cookiecutter) and updated the react version.

When running it through the react testing server (using 18.2) I can scroll very smoothly. When running it through the react testing server (using 16.4) then scrolling is clearly lagging. I can see the cells being drawn. When running it through Dash as a component (Dash forces 16.4) then scrolling is again lagging.

I understand that this is a non-Dash library specific problem, however I can imagine that updating to a more recent React version (or indicating how it could be hacked) is something that has come up?

[alexcjohnson]

Thanks @klar-C - here's the process I outlined in your original community post:

• [x] Add v18 as an experimental option, likely dash._dash_renderer._set_react_version("18.2.0")
• [x] See if anything breaks in the Dash core, and fix it. Add a flavor of all the dash/dcc/table tests using v18
• [x] Alert maintainers of 3rd-party component packages to the v18 option and encourage them to try it and make any necessary adjustments
• [ ] Do the same with all the other (non-core) Plotly-maintained component packages
• [ ] Once we have sufficient confidence the component ecosystem can handle it, we’ll make v18 the default, but keep v16 around for a while as a backup for anyone who still needs a component (or version of a component) that can’t use v18

I've opened #2260 to address the first two pieces. If that goes well, once we've merged and released it we can move on to testing with other components

[MrTeale]

@alexcjohnson - I'd love to get involved in moving Dash across to React 18 if there's anything left to do.

I noticed a few failing tests in the CircleCI but can't replicate these issues on my local machine. Are these just flakey tests on CircleCI or an actual issue?

[alexcjohnson]

Did you run the tests with the REACT_VERSION=“18.2.0” environment variable? I haven’t managed to dig in fully, but the first couple of the failing tests I tried do fail for me locally as well, so I don’t think it’s just CI flakiness. Seemed like some details of how React sequences things must have changed and we need to be more careful. If you do manage to reproduce the failures I’d welcome any help you can give to sort them out!

[PSoltes]

is there any ETA on this React 18 move? Most react libs moved to it now and Dash not using it blocks using our own components created in React.

[Coding-with-Adam]

Hi @PSoltes Thanks for following up. We're considering setting React 18 in Dash 2.17. But we're reaching out to the community to see if they expect any issues.

Any issues you might expect with this move?

[ndrezn]

Hey folks, we're looking to implement this upgrade once we close #2517, which is currently WIP. You can expect React 18.2 to become the default for Dash with the upcoming 2.17 or 2.18 release. cc @emilykl

[T4rk1n]

Switching to default react 18 will be part of the dash 3.0 release once #2919 is resolved.