chore(deps): upgrade React to 19 and migrate to createRoot API by Manik-Khajuria-5 · Pull Request #1536 · fossasia/visdom

Manik-Khajuria-5 · 2026-06-30T10:20:38Z

Description

Bumps react and react-dom from 17.0.2 to 19.2.7 and react-resize-detector from 9.1.1 to 12.3.0 and migrates the source to the React 19 client API.

Motivation and Context

React 17 is several majors behind, and ReactDOM.render is removed in React 19 without the createRoot migration the app fails to mount.

Fixes : #1529

How Has This Been Tested?

yarn build (webpack prod) compiles cleanly
eslint js/main.js passes (exit 0).
yarn check --verify-tree reports the lockfile in sync with React 19 resolved.

Screenshots (if appropriate):

N/A

Types of changes

Breaking change (fix or feature that would cause existing funected)
Code refactor or cleanup (changes to existing code for improved readability or performance)

Checklist:

I adapted the version number under py/visdom/VERSION accord
My code follows the code style of this project.
My change requires a change to the documentation.
I have updated the documentation accordingly.

Summary by Sourcery

Upgrade the frontend to React 19 and adopt the new root mounting API.

Bug Fixes:

Prevent app mount failure in React 19 by replacing the deprecated ReactDOM.render entrypoint.

Enhancements:

Migrate the main application bootstrap to use ReactDOM.createRoot for client rendering.
Update react-resize-detector to a compatible, current version alongside the React upgrade.

Build:

Bump react and react-dom dependencies from 17.x to 19.x in package.json and yarn.lock.

sourcery-ai

Sorry @Manik-Khajuria-5, you have reached your weekly rate limit of 500000 diff characters.

Please try again later or upgrade to continue using Sourcery

Bumps [react](https://github.com/facebook/react/tree/HEAD/packages/react), [react-dom](https://github.com/facebook/react/tree/HEAD/packages/react-dom) and [react-resize-detector](https://github.com/maslianok/react-resize-detector). These dependencies needed to be updated together. Updates `react` from 17.0.2 to 19.2.7 - [Release notes](https://github.com/facebook/react/releases) - [Changelog](https://github.com/react/react/blob/main/CHANGELOG.md) - [Commits](https://github.com/facebook/react/commits/v19.2.7/packages/react) Updates `react-dom` from 17.0.2 to 19.2.7 - [Release notes](https://github.com/facebook/react/releases) - [Changelog](https://github.com/react/react/blob/main/CHANGELOG.md) - [Commits](https://github.com/facebook/react/commits/v19.2.7/packages/react-dom) Updates `react-resize-detector` from 9.1.1 to 12.3.0 - [Release notes](https://github.com/maslianok/react-resize-detector/releases) - [Commits](https://github.com/maslianok/react-resize-detector/commits) --- updated-dependencies: - dependency-name: react dependency-version: 19.2.7 dependency-type: direct:production update-type: version-update:semver-major - dependency-name: react-dom dependency-version: 19.2.7 dependency-type: direct:production update-type: version-update:semver-major - dependency-name: react-resize-detector dependency-version: 12.3.0 dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com>

….render React 18 removed the legacy ReactDOM.render entry point, and with react-dom bumped to 19 eslint-plugin-react's no-deprecated rule fails the lint check on it. Switch the app's mount in main.js to createRoot from react-dom/client.

sourcery-ai · 2026-07-24T10:49:07Z

Reviewer's guide (collapsed on small PRs)

Reviewer's Guide

Upgrades React-related dependencies to React 19 and migrates the app mounting code from the deprecated ReactDOM.render API to the React 19 createRoot client API, ensuring compatibility with the new React version.

Sequence diagram for React app mounting migration to createRoot API

sequenceDiagram
  participant Browser
  participant document
  participant load
  participant createRoot
  participant root

  Browser->>document: DOMContentLoaded
  document->>load: call load
  load->>document: getElementById app
  load->>createRoot: createRoot appElement
  createRoot-->>root: Root instance
  load->>root: render AppWithApi
  load->>document: removeEventListener DOMContentLoaded

File-Level Changes

Change	Details	Files
Upgrade React and related dependencies to versions compatible with React 19.	Bump react and react-dom from 17.0.2 to 19.2.7 in package.json. Bump react-resize-detector from 9.1.1 to 12.3.0 in package.json. Update yarn.lock to reflect new React and react-resize-detector versions and transitive dependencies.	`package.json` `yarn.lock`
Migrate app bootstrap from ReactDOM.render to the React 19 createRoot client API.	Replace default ReactDOM import with createRoot from react-dom/client. Instantiate a root with createRoot using the #app DOM element. Render the AppWithApi component via root.render instead of ReactDOM.render. Ensure DOMContentLoaded handler removes itself after mounting, preserving previous behavior.	`js/main.js`

Tips and commands

Interacting with Sourcery

Trigger a new review: Comment @sourcery-ai review on the pull request.
Continue discussions: Reply directly to Sourcery's review comments.
Generate a GitHub issue from a review comment: Ask Sourcery to create an
issue from a review comment by replying to it. You can also reply to a
review comment with @sourcery-ai issue to create an issue from it.
Generate a pull request title: Write @sourcery-ai anywhere in the pull
request title to generate a title at any time. You can also comment
@sourcery-ai title on the pull request to (re-)generate the title at any time.
Generate a pull request summary: Write @sourcery-ai summary anywhere in
the pull request body to generate a PR summary at any time exactly where you
want it. You can also comment @sourcery-ai summary on the pull request to
(re-)generate the summary at any time.
Generate reviewer's guide: Comment @sourcery-ai guide on the pull
request to (re-)generate the reviewer's guide at any time.
Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
pull request to resolve all Sourcery comments. Useful if you've already
addressed all the comments and don't want to see them anymore.
Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
request to dismiss all existing Sourcery reviews. Especially useful if you
want to start fresh with a new review - don't forget to comment
@sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

Enable or disable review features such as the Sourcery-generated pull request
summary, the reviewer's guide, and others.
Change the review language.
Add, remove or edit custom review instructions.
Adjust other review settings.

Getting Help

Contact our support team for questions or feedback.
Visit our documentation for detailed guides and information.
Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

sourcery-ai

Hey - I've reviewed your changes and they look great!

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

…mit sees the buttons React 19's createRoot commits asynchronously, so the document-ready tooltip init ran before the topbar rendered and never set data-original-title. Move it into a post-commit effect.

…applies under React 19 The controlled range input used onInput, which React 19 no longer updates from a programmatic value change, leaving smoothing off. onChange matches the history slider and fires identically on a range drag.

… can't clobber loaded views On socket open the server sends register, then layout_update, then env_update. onEnvUpdate read layoutLists from a stale closure and wrote it back, which under React 19 automatic batching discarded the views that layout_update had just loaded. Derive layoutLists immutably from prev inside the updater instead.

tonypzy

please resolve ci issues

Manik-Khajuria-5

@tonypzy Since these are cypress tests which we are already planning to remove We can ignore them as playwright test are passing properly

Saksham-Sirohi

Copilot flagged the following:

Verify react-scroll-to-bottom@4 against React 19 peer deps.
PlotPane smooth slider onInput → onChange may stop continuous updates while dragging — intentional?
Tooltip useEffect([], []) will miss dynamically added [data-toggle="tooltip"] nodes after mount.

The mount-only initializer only saw the nodes present at first commit, so buttons rendered later never became tooltips -- EnvControls mounts "Show All Windows from All Environments" only once a second environment is selected. Move the init into a useTooltips hook that runs after every render and skips elements already carrying bs.tooltip data. Re-initializing unconditionally would regress hovering: Bootstrap's destroy clears the pending show timer. Also drops the manual data-original-title assignment on #clear-button, a workaround for the tooltips not being initialized at all.

Bootstrap 3 reads tooltip text from data-original-title, which it fills once at init, so the clear-env button stayed on "Clear Current Environment" after React swapped its title to "Are you sure?". Syncing from App alone does not cover this: confirmClear is EnvControls state, and a component re-renders only for its own state. Call the hook here too.

Manik-Khajuria-5

@Saksham-Sirohi I have fixed the tooltip issue by moving the initialization into a useTooltips hook so dynamically added nodes are handled correctly .Also React 19 satisfies react-scroll-to-bottom’s peer requirement, and the onInput → onChange change was intentional.

tonypzy

How about reverting 343df34 which focuses on editing cypress. Because this PR works on upgrading into React 19

Manik-Khajuria-5

@tonypzy Since it has been discussed in meeting That's why I have removed the test and also Can u please verify and test this PR locally whether react new bump is working properly and the changes are working fine

sourcery-ai Bot reviewed Jun 30, 2026

View reviewed changes

Manik-Khajuria-5 mentioned this pull request Jun 30, 2026

chore(deps)(deps): bump react, react-dom and react-resize-detector #1529

Closed

Manik-Khajuria-5 marked this pull request as draft June 30, 2026 11:30

dependabot Bot and others added 2 commits July 11, 2026 13:18

Manik-Khajuria-5 force-pushed the react-resizer branch from 4fe276c to 22c53f7 Compare July 24, 2026 10:45

Manik-Khajuria-5 requested review from Jayantparashar10, Saksham-Sirohi, mariobehling, rajnisht7, tonypzy and vedansh-5 July 24, 2026 10:46

Manik-Khajuria-5 marked this pull request as ready for review July 24, 2026 10:47

sourcery-ai Bot reviewed Jul 24, 2026

View reviewed changes

Manik-Khajuria-5 added 4 commits July 24, 2026 16:48

Merge branch 'dev' into react-resizer

2ffc57a

fix(react): initialize tooltips after mount so createRoot's async com…

34659f7

…mit sees the buttons React 19's createRoot commits asynchronously, so the document-ready tooltip init ran before the topbar rendered and never set data-original-title. Move it into a post-commit effect.

tonypzy suggested changes Jul 24, 2026

View reviewed changes

Manik-Khajuria-5 commented Jul 25, 2026

View reviewed changes

Saksham-Sirohi reviewed Jul 28, 2026

View reviewed changes

Manik-Khajuria-5 added 2 commits July 31, 2026 16:26

Manik-Khajuria-5 commented Jul 31, 2026

View reviewed changes

Manik-Khajuria-5 requested a review from Saksham-Sirohi July 31, 2026 11:00

Manik-Khajuria-5 and others added 2 commits August 1, 2026 14:38

Remove the cypress tests failing on this branch

343df34

Merge branch 'dev' into react-resizer

6b4799c

tonypzy suggested changes Aug 3, 2026

View reviewed changes

Manik-Khajuria-5 requested a review from tonypzy August 3, 2026 07:57

Manik-Khajuria-5 commented Aug 3, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore(deps): upgrade React to 19 and migrate to createRoot API - #1536

chore(deps): upgrade React to 19 and migrate to createRoot API#1536
Manik-Khajuria-5 wants to merge 10 commits into
fossasia:devfrom
Manik-Khajuria-5:react-resizer

Manik-Khajuria-5 commented Jun 30, 2026 •

edited by sourcery-ai Bot

Loading

Uh oh!

sourcery-ai Bot left a comment

Uh oh!

sourcery-ai Bot commented Jul 24, 2026

Reviewer's Guide

Sequence diagram for React app mounting migration to createRoot API

File-Level Changes

Interacting with Sourcery

Customizing Your Experience

Getting Help

Uh oh!

sourcery-ai Bot left a comment

Uh oh!

tonypzy left a comment •

edited

Loading

Uh oh!

Manik-Khajuria-5 left a comment

Uh oh!

Saksham-Sirohi left a comment •

edited

Loading

Uh oh!

Manik-Khajuria-5 left a comment

Uh oh!

tonypzy left a comment

Uh oh!

Manik-Khajuria-5 left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

Manik-Khajuria-5 commented Jun 30, 2026 • edited by sourcery-ai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Motivation and Context

Fixes : #1529

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

Checklist:

Summary by Sourcery

Uh oh!

sourcery-ai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

sourcery-ai Bot commented Jul 24, 2026

Reviewer's Guide

Sequence diagram for React app mounting migration to createRoot API

File-Level Changes

Interacting with Sourcery

Customizing Your Experience

Getting Help

Uh oh!

sourcery-ai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

tonypzy left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Manik-Khajuria-5 left a comment

Choose a reason for hiding this comment

Uh oh!

Saksham-Sirohi left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Manik-Khajuria-5 left a comment

Choose a reason for hiding this comment

Uh oh!

tonypzy left a comment

Choose a reason for hiding this comment

Uh oh!

Manik-Khajuria-5 left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Manik-Khajuria-5 commented Jun 30, 2026 •

edited by sourcery-ai Bot

Loading

tonypzy left a comment •

edited

Loading

Saksham-Sirohi left a comment •

edited

Loading