Skip to content

Upgrade from React 17 to React 19#28

Open
devin-ai-integration[bot] wants to merge 1 commit into
mainfrom
devin/1779305112-react-19-upgrade
Open

Upgrade from React 17 to React 19#28
devin-ai-integration[bot] wants to merge 1 commit into
mainfrom
devin/1779305112-react-19-upgrade

Conversation

@devin-ai-integration
Copy link
Copy Markdown

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

Summary

Upgrades the project from React 17 to React 19, including all related dependency updates, entry point migration, deprecated API removal, and test fixes.

Changes

Dependency updates (package.json):

  • react / react-dom: ^17.0.2^19.0.0
  • @testing-library/react: ^12.1.4^16.0.0
  • @testing-library/jest-dom: ^5.16.3^6.0.0
  • @testing-library/user-event: ^13.5.0^14.0.0
  • @testing-library/dom added (peer dep for @testing-library/react v16)
  • web-vitals: ^2.1.4^4.0.0
  • react-scripts 5.0.0 kept (works with --legacy-peer-deps)
  • react-transition-group ^4.4.2 kept (compatible with React 19 when using nodeRef)
  • react-countdown ^2.3.2 kept (compatible)

Entry point (src/index.js):

  • Migrated from ReactDOM.render() to createRoot() API

CSSTransition nodeRef (src/components/Modal/Modal.jsx, src/components/Alert/Alert.jsx):

  • Added nodeRef prop to all <CSSTransition> components to avoid removed findDOMNode

web-vitals (src/reportWebVitals.js):

  • Updated from v2 API (getCLS, getFID, etc.) to v4 API (onCLS, onINP, etc.)

Tests (src/App.test.jsx):

  • Wrapped App in AlertProvider (required context)
  • Updated assertion to test actual Wordle UI (keyboard "enter" button) instead of non-existent "learn react" text

Screenshots

How to play modal (fade transition working):
How to play modal

Game board after closing modal:
Game board

Review & Testing Checklist for Human

  • Run npm start and verify the game loads, plays, and animations (tile flips, modal fades, alert fades) all work correctly
  • Test dark mode / high contrast mode toggles in settings
  • Verify no React warnings in browser console about deprecated APIs

Notes

  • react-scripts 5.0.0 is kept and works with --legacy-peer-deps. A future Vite migration may be beneficial but is not required for React 19 compatibility.
  • No defaultProps, propTypes, string refs, or legacy context usage was found in the codebase — no removals needed.
  • Browser console is clean — no errors or warnings.
  • All local verifications pass: npm test, npm run build, npm run check (prettier).

Link to Devin session: https://app.devin.ai/sessions/00d9c9de8fb844a5a1a6c2736abad001


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, react-dom to ^19.0.0
- Update @testing-library/react to ^16.0.0, jest-dom to ^6.0.0, user-event to ^14.0.0
- Add @testing-library/dom (peer dependency for @testing-library/react v16)
- Update web-vitals to ^4.0.0 (getFID -> onINP, getCLS -> onCLS, etc.)
- Migrate entry point from ReactDOM.render() to createRoot() API
- Add nodeRef prop to CSSTransition in Modal and Alert components
- Fix test to wrap App in AlertProvider and test actual Wordle UI

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

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