Support React 19

.ai/ARCHITECTURE.md

@@ -240,19 +240,21 @@ dash.get_app().backend.request_adapter()  # RequestAdapter instance
 
 Dash supports multiple React versions. Configured in `dash/_dash_renderer.py`.
 
-**Available versions:** 18.3.1 (default), 18.2.0, 16.14.0
+**Available versions:** 18.3.1 (default), 18.2.0, 19.2.4 (experimental)
+
+React 19 has no official UMD builds; Dash serves the `umd-react` package for it, plus a small shim (`dash-renderer/build/react-shim.min.js`, source `dash/dash-renderer/src/react-shim.js`) loaded right after react-dom and before any component package. The shim stubs the React <=18 secret internals (`ReactCurrentOwner`) some component libraries touch at load time, and provides `window.ReactJSXRuntime`, the global that component bundles externalize `react/jsx-runtime` to.
 
 Set via environment variable (experimental):
 
 ```bash
-REACT_VERSION=16.14.0 python app.py
+REACT_VERSION=19.2.4 python app.py
 ```
 
 Or programmatically before creating the app:
 
 ```python
 from dash._dash_renderer import _set_react_version
-_set_react_version("16.14.0")
+_set_react_version("19.2.4")
 
 from dash import Dash
 app = Dash(__name__)

.github/workflows/testing.yml

@@ -608,19 +608,21 @@ jobs:
           pytest --headless --nopercyfinalize tests/websocket -v -s
 
   test-main:
-    name: Main Dash Tests (Python ${{ matrix.python-version }}, Group ${{ matrix.test-group }})
+    name: Main Dash Tests (Python ${{ matrix.python-version }}, React ${{ matrix.react-version }}, Group ${{ matrix.test-group }})
     needs: build
     runs-on: ubuntu-latest
     timeout-minutes: 30
     strategy:
       fail-fast: false
       matrix:
         python-version: ["3.9", "3.12"]
+        react-version: ["18.3.1", "19.2.4"]
         test-group: ["1", "2", "3"]
 
     env:
-      PERCY_TOKEN: ${{ matrix.python-version == '3.12' && secrets.PERCY_TOKEN || '' }}
-      PERCY_ENABLE: ${{ matrix.python-version == '3.12' && '1' || '0' }}
+      REACT_VERSION: ${{ matrix.react-version }}
+      PERCY_TOKEN: ${{ matrix.python-version == '3.12' && matrix.react-version == '18.3.1' && secrets.PERCY_TOKEN || '' }}
+      PERCY_ENABLE: ${{ matrix.python-version == '3.12' && matrix.react-version == '18.3.1' && '1' || '0' }}
       PERCY_PARALLEL_TOTAL: -1
       # Pin the build identity so every shard joins the same parallel build and
       # Percy links it to the PR. Auto-detection otherwise uses the ephemeral
@@ -680,11 +682,11 @@ jobs:
         run: npm run setup-tests.py
 
       - name: Run main integration tests
-        if: matrix.python-version != '3.12'
+        if: matrix.python-version != '3.12' || matrix.react-version != '18.3.1'
         run: pytest --headless --nopercyfinalize --junitxml=test-reports/junit_intg.xml tests/integration --splits 3 --group ${{ matrix.test-group }}
 
       - name: Run main integration tests with Percy
-        if: matrix.python-version == '3.12'
+        if: matrix.python-version == '3.12' && matrix.react-version == '18.3.1'
         uses: ./.github/actions/percy-exec
         with:
           command: pytest --headless --nopercyfinalize --junitxml=test-reports/junit_intg.xml tests/integration --splits 3 --group ${{ matrix.test-group }}
@@ -695,21 +697,21 @@ jobs:
         if: always()
         uses: actions/upload-artifact@v4
         with:
-          name: test-main-results-py${{ matrix.python-version }}-group${{ matrix.test-group }}
+          name: test-main-results-py${{ matrix.python-version }}-react${{ matrix.react-version }}-group${{ matrix.test-group }}
           path: test-reports/
           retention-days: 7
 
       - name: Upload dash artifacts
         if: always()
         uses: actions/upload-artifact@v4
         with:
-          name: test-main-dash-artifacts-py${{ matrix.python-version }}-group${{ matrix.test-group }}
+          name: test-main-dash-artifacts-py${{ matrix.python-version }}-react${{ matrix.react-version }}-group${{ matrix.test-group }}
           path: /tmp/dash_artifacts
           retention-days: 7
           if-no-files-found: ignore
 
   html-test:
-    name: HTML Components Tests (Python ${{ matrix.python-version }})
+    name: HTML Components Tests (Python ${{ matrix.python-version }}, React ${{ matrix.react-version }})
     needs: [build, changes_filter]
     if: |
       (github.event_name == 'push' && (github.ref == 'refs/heads/master' || github.ref == 'refs/heads/dev')) ||
@@ -720,10 +722,12 @@ jobs:
       fail-fast: false
       matrix:
         python-version: ["3.9", "3.12"]
+        react-version: ["18.3.1", "19.2.4"]
 
     env:
-      PERCY_TOKEN: ${{ matrix.python-version == '3.12' && secrets.PERCY_TOKEN || '' }}
-      PERCY_ENABLE: ${{ matrix.python-version == '3.12' && '1' || '0' }}
+      REACT_VERSION: ${{ matrix.react-version }}
+      PERCY_TOKEN: ${{ matrix.python-version == '3.12' && matrix.react-version == '18.3.1' && secrets.PERCY_TOKEN || '' }}
+      PERCY_ENABLE: ${{ matrix.python-version == '3.12' && matrix.react-version == '18.3.1' && '1' || '0' }}
       PERCY_PARALLEL_TOTAL: -1
       # Pin the build identity so every shard joins the same parallel build and
       # Percy links it to the PR. Auto-detection otherwise uses the ephemeral
@@ -784,12 +788,12 @@ jobs:
         run: npm ci
 
       - name: Run HTML components tests
-        if: matrix.python-version != '3.12'
+        if: matrix.python-version != '3.12' || matrix.react-version != '18.3.1'
         working-directory: components/dash-html-components
         run: pytest --headless --nopercyfinalize --junitxml=test-reports/junit_html.xml
 
       - name: Run HTML components tests with Percy
-        if: matrix.python-version == '3.12'
+        if: matrix.python-version == '3.12' && matrix.react-version == '18.3.1'
         uses: ./.github/actions/percy-exec
         with:
           command: pytest --headless --nopercyfinalize --junitxml=test-reports/junit_html.xml
@@ -801,15 +805,15 @@ jobs:
         if: always()
         uses: actions/upload-artifact@v4
         with:
-          name: html-test-results-py${{ matrix.python-version }}
+          name: html-test-results-py${{ matrix.python-version }}-react${{ matrix.react-version }}
           path: components/dash-html-components/test-reports/
           retention-days: 7
 
       - name: Upload dash artifacts
         if: always()
         uses: actions/upload-artifact@v4
         with:
-          name: html-test-dash-artifacts-py${{ matrix.python-version }}
+          name: html-test-dash-artifacts-py${{ matrix.python-version }}-react${{ matrix.react-version }}
           path: /tmp/dash_artifacts
           retention-days: 7
           if-no-files-found: ignore
@@ -904,7 +908,7 @@ jobs:
           npm run lint
 
   dcc-test:
-    name: DCC Integration Tests (Python ${{ matrix.python-version }}, Group ${{ matrix.test-group }})
+    name: DCC Integration Tests (Python ${{ matrix.python-version }}, React ${{ matrix.react-version }}, Group ${{ matrix.test-group }})
     needs: [build, changes_filter]
     if: |
       (github.event_name == 'push' && (github.ref == 'refs/heads/master' || github.ref == 'refs/heads/dev')) ||
@@ -915,11 +919,13 @@ jobs:
       fail-fast: false
       matrix:
         python-version: ["3.9", "3.12"]
+        react-version: ["18.3.1", "19.2.4"]
         test-group: ["1", "2", "3"]
 
     env:
-      PERCY_TOKEN: ${{ matrix.python-version == '3.12' && secrets.PERCY_TOKEN || '' }}
-      PERCY_ENABLE: ${{ matrix.python-version == '3.12' && '1' || '0' }}
+      REACT_VERSION: ${{ matrix.react-version }}
+      PERCY_TOKEN: ${{ matrix.python-version == '3.12' && matrix.react-version == '18.3.1' && secrets.PERCY_TOKEN || '' }}
+      PERCY_ENABLE: ${{ matrix.python-version == '3.12' && matrix.react-version == '18.3.1' && '1' || '0' }}
       PERCY_PARALLEL_TOTAL: -1
       # Pin the build identity so every shard joins the same parallel build and
       # Percy links it to the PR. Auto-detection otherwise uses the ephemeral
@@ -986,15 +992,15 @@ jobs:
         if: always()
         uses: actions/upload-artifact@v4
         with:
-          name: dcc-test-results-py${{ matrix.python-version }}-group${{ matrix.test-group }}
+          name: dcc-test-results-py${{ matrix.python-version }}-react${{ matrix.react-version }}-group${{ matrix.test-group }}
           path: components/dash-core-components/test-reports/
           retention-days: 7
 
       - name: Upload dash artifacts
         if: always()
         uses: actions/upload-artifact@v4
         with:
-          name: dcc-dash-artifacts-py${{ matrix.python-version }}-group${{ matrix.test-group }}
+          name: dcc-dash-artifacts-py${{ matrix.python-version }}-react${{ matrix.react-version }}-group${{ matrix.test-group }}
           path: /tmp/dash_artifacts
           retention-days: 7
           if-no-files-found: ignore

.lintstagedrc.js

@@ -26,7 +26,7 @@ const sh_cd = (directory, command) => {
 
 module.exports = {
     // Python checks (run from root, using root venv)
-    "dash/*.py": (filenames) => [
+    "dash/**/*.py": (filenames) => [
         `${venvBin("python")} -m pylint --rcfile=.pylintrc ${filenames.join(
             " "
         )}`,
@@ -93,7 +93,9 @@ module.exports = {
         ];
     },
 
-    "dash/dash-renderer/**/*.{js,jsx,ts,tsx}": (filenames) => {
+    // Only src and tests are covered by dash-renderer's tsconfig; eslint's
+    // type-aware parser errors on files outside it (e.g. webpack configs).
+    "dash/dash-renderer/{src,tests}/**/*.{js,jsx,ts,tsx}": (filenames) => {
         const relativeFilePaths = filenames.map((f) =>
             path.relative(path.join("dash", "dash-renderer"), f)
         );

CHANGELOG.md

@@ -2,6 +2,14 @@
 All notable changes to `dash` will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 
+## [Unreleased]
+
+### Added
+- [#3646](https://github.com/plotly/dash/pull/3646) Experimental support for React 19. The default is still React 18.3.1; to use React 19 set the environment variable `REACT_VERSION=19.2.4` before running your app, or call `dash._dash_renderer._set_react_version("19.2.4")` inside the app. React 19 has no official UMD builds, so Dash serves the [`umd-react`](https://www.npmjs.com/package/umd-react) package, together with a compatibility shim loaded after react-dom and before any component package. The shim keeps component libraries built against React <=18 (e.g. dash-bootstrap-components, dash-mantine-components) working under React 19: it stubs the removed `ReactCurrentOwner` internals, redirects the legacy element `$$typeof` symbol so pre-bundled React 18 jsx-runtimes produce elements React 19 accepts (error #525), and exposes a global `react/jsx-runtime` (`window.ReactJSXRuntime`) that Dash's own component bundles externalize to.
+
+### Removed
+- [#3646](https://github.com/plotly/dash/pull/3646) Remove React 16 support (`16.14.0` is no longer an accepted value for `REACT_VERSION` / `_set_react_version`).
+
 ## [4.4.0] - 2026-07-03
 
 ### Added

components/dash-core-components/tests/integration/input/test_number_input.py

@@ -99,26 +99,28 @@ def test_inni004_steppers(dash_dcc, debounce_number_app):
     dash_dcc.wait_for_text_to_equal("#div-fast", "106")
 
     # Test that steppers respect min constraint
+    # Use step-valid value: with min=10 and step=3, valid values are 10, 13, 16, ...
     dash_dcc.clear_input(input_elem)
-    input_elem.send_keys("11")  # Close to min=10
+    input_elem.send_keys("13")  # First valid value above min
+    time.sleep(0.3)  # Wait for debounce (0.25s) to settle before clicking
     decrement_btn.click()  # Should go to 10 (min)
     dash_dcc.wait_for_text_to_equal("#div-fast", "10")
 
     # Verify decrement button is disabled at minimum
-    assert (
-        decrement_btn.get_attribute("disabled") == "true"
-    ), "Decrement should be disabled at minimum"
+    decrement_btn = dash_dcc.find_element("#input-fast~.dash-stepper-decrement")
+    assert not decrement_btn.is_enabled(), "Decrement should be disabled at minimum"
 
     # Test that steppers respect max constraint
+    # Use step-valid value: 9997 = 10 + 3*3329, and 9997 + 3 = 10000
     dash_dcc.clear_input(input_elem)
-    input_elem.send_keys("9999")  # Close to max=10000
+    input_elem.send_keys("9997")  # Close to max=10000, step-valid
+    time.sleep(0.3)  # Wait for debounce (0.25s) to settle before clicking
     increment_btn.click()  # Should go to 10000 (max)
     dash_dcc.wait_for_text_to_equal("#div-fast", "10000")
 
     # Verify increment button is disabled at maximum
-    assert (
-        increment_btn.get_attribute("disabled") == "true"
-    ), "Increment should be disabled at maximum"
+    increment_btn = dash_dcc.find_element("#input-fast~.dash-stepper-increment")
+    assert not increment_btn.is_enabled(), "Increment should be disabled at maximum"
 
     assert dash_dcc.get_logs() == []
 

components/dash-core-components/webpack.config.js

@@ -38,6 +38,8 @@ module.exports = (env, argv) => {
     const externals = ('externals' in overrides) ? overrides.externals : ({
         react: 'React',
         'react-dom': 'ReactDOM',
+        'react/jsx-runtime': 'ReactJSXRuntime',
+        'react/jsx-dev-runtime': 'ReactJSXRuntime',
         'prop-types': 'PropTypes'
     });
 
@@ -56,11 +58,7 @@ module.exports = (env, argv) => {
         },
         externals,
         resolve: {
-            extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
-            alias: {
-                'react/jsx-runtime': require.resolve('react/jsx-runtime'),
-                'react/jsx-dev-runtime': require.resolve('react/jsx-dev-runtime'),
-            }
+            extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
         },
         module: {
             noParse: /node_modules[\\\/]plotly.js-dist-min/,

components/dash-html-components/webpack.config.js

@@ -37,6 +37,8 @@ module.exports = (env, argv) => {
     const externals = ('externals' in overrides) ? overrides.externals : ({
         react: 'React',
         'react-dom': 'ReactDOM',
+        'react/jsx-runtime': 'ReactJSXRuntime',
+        'react/jsx-dev-runtime': 'ReactJSXRuntime',
         'prop-types': 'PropTypes'
     });
 

components/dash-table/.config/webpack/base.js

@@ -35,6 +35,8 @@ module.exports = (options = {}) => {
         externals: {
             react: 'React',
             'react-dom': 'ReactDOM',
+            'react/jsx-runtime': 'ReactJSXRuntime',
+            'react/jsx-dev-runtime': 'ReactJSXRuntime',
         },
         module: {
             rules: [

dash/_dash_renderer.py

@@ -3,11 +3,20 @@
 
 __version__ = "3.4.0"
 
-_available_react_versions = {"18.3.1", "18.2.0", "16.14.0"}
-_available_reactdom_versions = {"18.3.1", "18.2.0", "16.14.0"}
+_available_react_versions = {"18.3.1", "18.2.0", "19.2.4"}
+_available_reactdom_versions = {"18.3.1", "18.2.0", "19.2.4"}
 _js_dist_dependencies: List[Dict[str, Any]] = []  # to be set by _set_react_version
 
 
+def _react_cdn_urls(name, version):
+    # React 19+ has no official UMD builds, use the umd-react package instead
+    if version.startswith("19."):
+        base = f"https://unpkg.com/umd-react@{version}/dist/{name}"
+    else:
+        base = f"https://unpkg.com/{name}@{version}/umd/{name}"
+    return {"prod": f"{base}.production.min.js", "dev": f"{base}.development.js"}
+
+
 def _set_react_version(v_react, v_reactdom=None):
     if not v_reactdom:
         v_reactdom = v_react
@@ -19,19 +28,28 @@ def _set_react_version(v_react, v_reactdom=None):
     assert v_react in _available_react_versions, react_err
     assert v_reactdom in _available_reactdom_versions, reactdom_err
 
+    react_urls = _react_cdn_urls("react", v_react)
+    reactdom_urls = _react_cdn_urls("react-dom", v_reactdom)
+    # The shim must load right after react-dom, before any component package:
+    # component bundles may touch React internals at load time.
+    shim_url = f"https://unpkg.com/dash-renderer@{__version__}/build/react-shim.min.js"
+    shim_path = "dash-renderer/build/react-shim.min.js"
+
     _js_dist_dependencies[:] = [
         {
             "external_url": {
                 "prod": [
                     "https://unpkg.com/@babel/polyfill@7.12.1/dist/polyfill.min.js",
-                    f"https://unpkg.com/react@{v_react}/umd/react.production.min.js",
-                    f"https://unpkg.com/react-dom@{v_reactdom}/umd/react-dom.production.min.js",
+                    react_urls["prod"],
+                    reactdom_urls["prod"],
+                    shim_url,
                     "https://unpkg.com/prop-types@15.8.1/prop-types.min.js",
                 ],
                 "dev": [
                     "https://unpkg.com/@babel/polyfill@7.12.1/dist/polyfill.min.js",
-                    f"https://unpkg.com/react@{v_react}/umd/react.development.js",
-                    f"https://unpkg.com/react-dom@{v_reactdom}/umd/react-dom.development.js",
+                    react_urls["dev"],
+                    reactdom_urls["dev"],
+                    shim_url,
                     "https://unpkg.com/prop-types@15.8.1/prop-types.js",
                 ],
             },
@@ -40,12 +58,14 @@ def _set_react_version(v_react, v_reactdom=None):
                     "deps/polyfill@7.12.1.min.js",
                     f"deps/react@{v_react}.min.js",
                     f"deps/react-dom@{v_reactdom}.min.js",
+                    shim_path,
                     "deps/prop-types@15.8.1.min.js",
                 ],
                 "dev": [
                     "deps/polyfill@7.12.1.min.js",
                     f"deps/react@{v_react}.js",
                     f"deps/react-dom@{v_reactdom}.js",
+                    shim_path,
                     "deps/prop-types@15.8.1.js",
                 ],
             },