Skip to content

Upgrade from React 17 to React 19#17

Open
devin-ai-integration[bot] wants to merge 2 commits into
mainfrom
devin/1778098389-upgrade-react-19
Open

Upgrade from React 17 to React 19#17
devin-ai-integration[bot] wants to merge 2 commits into
mainfrom
devin/1778098389-upgrade-react-19

Conversation

@devin-ai-integration
Copy link
Copy Markdown

@devin-ai-integration devin-ai-integration Bot commented May 6, 2026

Summary

Upgrades the project from React 17 (^17.0.2) to React 19 (^19.0.0), including all necessary dependency updates and API migrations.

Changes

Dependencies (package.json):

  • react and react-dom: ^17.0.2^19.0.0
  • @testing-library/react: ^12.1.4^16.1.0 (required for React 19 createRoot compatibility)
  • react-countdown: ^2.3.2^2.3.6
  • react-scripts: 5.0.05.0.1

Root API migration (src/index.js):

  • Replaced deprecated ReactDOM.render() with createRoot API from react-dom/client

react-transition-group compatibility (src/components/Modal/Modal.jsx, src/components/Alert/Alert.jsx):

  • Added nodeRef prop to all CSSTransition components to replace ReactDOM.findDOMNode (removed in React 19)

Codebase audit

Scanned src/ for other deprecated patterns — none found:

  • No ReactDOM.unmountComponentAtNode or additional ReactDOM.findDOMNode calls
  • No string refs or legacy context API (contextTypes, childContextTypes)
  • No deprecated lifecycle methods (componentWillMount, etc.)
  • No React.FC with implicit children prop

Pre-existing test failure

The existing test (App.test.jsx) was already failing on main before this upgrade — it renders <App /> without the required AlertProvider context wrapper. This is unrelated to the React 19 upgrade.

Review & Testing Checklist for Human

  • Run npm start and verify the Wordle game loads and plays correctly
  • Verify the countdown timer (react-countdown) works on game completion
  • Check that dark mode and high contrast mode toggles work
  • Confirm modal and alert animations still work (these use CSSTransition with nodeRef)

Notes

  • Build (npm run build) compiles successfully
  • Prettier formatting check passes
  • App verified running locally on React 19 — game board, keyboard, and modals all render correctly

Wordle running on React 19

Link to Devin session: https://app.devin.ai/sessions/d4346cb86c254c0e8b0d4289d02378b3
Requested by: @shahmir-masood


Devin Review

Status Commit
⚪ Not started

Run Devin Review

💡 Connect your GitHub account to enable automatic code reviews.

Open in Devin Review (Staging)

- Update react and react-dom from ^17.0.2 to ^19.0.0
- Update @testing-library/react from ^12.1.4 to ^16.1.0 (React 19 compat)
- Update react-countdown from ^2.3.2 to ^2.3.6
- Update react-scripts from 5.0.0 to 5.0.1
- Migrate src/index.js from ReactDOM.render() to createRoot API

Co-Authored-By: shahmir.masood <shahmir.masood@cognition.ai>
@devin-ai-integration
Copy link
Copy Markdown
Author

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

ReactDOM.findDOMNode was removed in React 19. Add nodeRef prop to
CSSTransition components in Modal and Alert to avoid the error.

Co-Authored-By: shahmir.masood <shahmir.masood@cognition.ai>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

0 participants