Support React 19

.ai/ARCHITECTURE.md

@@ -240,19 +240,23 @@ 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, redirects the legacy `react.element` `$$typeof` symbol so libraries that pre-bundled a React <=18 jsx-runtime don't hit React error #525, and provides `window.ReactJSXRuntime`, the global that component bundles externalize `react/jsx-runtime` to.
+
+**Convention for component libraries:** externalize `react/jsx-runtime` and `react/jsx-dev-runtime` using the *defensive* external expression found in `components/dash-core-components/webpack.config.js` (`jsxRuntimeExternal`), not a bare `'ReactJSXRuntime'` string. The expression falls back to building the runtime from `window.React.createElement` when the global is missing, so the same bundle works on Dash versions that predate the shim. A bare `'ReactJSXRuntime'` external throws `ReactJSXRuntime is not defined` / `Cannot read properties of undefined (reading 'jsx')` at bundle load on older Dash.
 
 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. Component library authors adopting this convention should copy the defensive `jsxRuntimeExternal` webpack external from `components/dash-core-components/webpack.config.js` rather than a bare `'ReactJSXRuntime'` string: it falls back to a `React.createElement`-based runtime when the global is missing, so the same build also works on Dash versions older than this release.
+
+### 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

@@ -7,6 +7,46 @@ const packagejson = require('./package.json');
 
 const dashLibraryName = packagejson.name.replace(/-/g, '_');
 
+// Externalized react/jsx-runtime. Newer Dash provides window.ReactJSXRuntime
+// (see dash-renderer/src/react-shim.js) backed by the React version loaded on
+// the page; the inline fallback keeps this bundle working on older Dash,
+// which does not define the global. Keep in sync with react-shim.js.
+const jsxRuntimeExternal = `var (window.ReactJSXRuntime || (window.ReactJSXRuntime = (function (React) {
+    function jsx(type, config, maybeKey) {
+        var props = {};
+        var children = null;
+        if (config != null) {
+            if (config.key !== undefined) {
+                props.key = '' + config.key;
+            }
+            for (var propName in config) {
+                if (
+                    Object.prototype.hasOwnProperty.call(config, propName) &&
+                    propName !== 'key' &&
+                    propName !== '__self' &&
+                    propName !== '__source'
+                ) {
+                    if (propName === 'children') {
+                        children = config[propName];
+                    } else {
+                        props[propName] = config[propName];
+                    }
+                }
+            }
+        }
+        if (maybeKey !== undefined) {
+            props.key = '' + maybeKey;
+        }
+        if (children === null || children === undefined) {
+            return React.createElement(type, props);
+        }
+        return Array.isArray(children)
+            ? React.createElement.apply(React, [type, props].concat(children))
+            : React.createElement(type, props, children);
+    }
+    return {jsx: jsx, jsxs: jsx, jsxDEV: jsx, Fragment: React.Fragment};
+})(window.React)))`;
+
 module.exports = (env, argv) => {
 
     let mode;
@@ -38,6 +78,8 @@ module.exports = (env, argv) => {
     const externals = ('externals' in overrides) ? overrides.externals : ({
         react: 'React',
         'react-dom': 'ReactDOM',
+        'react/jsx-runtime': jsxRuntimeExternal,
+        'react/jsx-dev-runtime': jsxRuntimeExternal,
         'prop-types': 'PropTypes'
     });
 
@@ -56,11 +98,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

@@ -3,6 +3,46 @@ const packagejson = require('./package.json');
 
 const dashLibraryName = packagejson.name.replace(/-/g, '_');
 
+// Externalized react/jsx-runtime. Newer Dash provides window.ReactJSXRuntime
+// (see dash-renderer/src/react-shim.js) backed by the React version loaded on
+// the page; the inline fallback keeps this bundle working on older Dash,
+// which does not define the global. Keep in sync with react-shim.js.
+const jsxRuntimeExternal = `var (window.ReactJSXRuntime || (window.ReactJSXRuntime = (function (React) {
+    function jsx(type, config, maybeKey) {
+        var props = {};
+        var children = null;
+        if (config != null) {
+            if (config.key !== undefined) {
+                props.key = '' + config.key;
+            }
+            for (var propName in config) {
+                if (
+                    Object.prototype.hasOwnProperty.call(config, propName) &&
+                    propName !== 'key' &&
+                    propName !== '__self' &&
+                    propName !== '__source'
+                ) {
+                    if (propName === 'children') {
+                        children = config[propName];
+                    } else {
+                        props[propName] = config[propName];
+                    }
+                }
+            }
+        }
+        if (maybeKey !== undefined) {
+            props.key = '' + maybeKey;
+        }
+        if (children === null || children === undefined) {
+            return React.createElement(type, props);
+        }
+        return Array.isArray(children)
+            ? React.createElement.apply(React, [type, props].concat(children))
+            : React.createElement(type, props, children);
+    }
+    return {jsx: jsx, jsxs: jsx, jsxDEV: jsx, Fragment: React.Fragment};
+})(window.React)))`;
+
 module.exports = (env, argv) => {
 
     let mode;
@@ -37,6 +77,8 @@ module.exports = (env, argv) => {
     const externals = ('externals' in overrides) ? overrides.externals : ({
         react: 'React',
         'react-dom': 'ReactDOM',
+        'react/jsx-runtime': jsxRuntimeExternal,
+        'react/jsx-dev-runtime': jsxRuntimeExternal,
         'prop-types': 'PropTypes'
     });