Upgrade from React 17 to React 19

[devin-ai-integration]

Summary

Upgrades the project from React 17.0.2 to React 19.0.0, including all necessary API migrations and dependency updates.

Dependency updates (package.json)

• react: ^17.0.2 → ^19.0.0
• react-dom: ^17.0.2 → ^19.0.0
• react-icons: ^4.3.1 → ^5.4.0
• @testing-library/react: ^12.1.4 → ^16.1.0 (React 19 compatible)
• react-transition-group: ^4.4.2 → ^4.4.5 (latest)
• react-countdown (^2.3.2), react-scripts (5.0.0) — kept at current versions (compatible with React 19)

API migrations

• src/index.js: Migrated from ReactDOM.render() to createRoot() API (react-dom/client)
• src/components/Alert/Alert.jsx: Added nodeRef prop to CSSTransition to avoid findDOMNode (removed in React 19)
• src/components/Modal/Modal.jsx: Added separate containerRef for CSSTransition nodeRef, keeping modalRef for useOnClickOutside behavior

Test fix

• src/App.test.jsx: Fixed pre-existing broken test — wrapped <App> in AlertProvider context and updated assertion to check for actual WORDLE heading instead of non-existent "learn react" text

Verification

• Production build (npm run build) compiles successfully
• Test suite passes
• Prettier formatting passes
• Dev server runs and renders correctly
• End-to-end UI testing passed (8/8 tests): app rendering, modal transitions, alert animations, click-outside dismiss, settings toggles, icon rendering, game input with color feedback, and clean console (no React errors)

Review & Testing Checklist for Human

• Run npm start and verify the game plays correctly (type guesses, submit, check color feedback)
• Open/close all modals (Info, Stats, Settings) — verify transitions work smoothly
• Verify alerts appear correctly (e.g., submit an invalid word)

Notes

• No deprecated React patterns were found in the codebase (no class components, no defaultProps, no forwardRef, no string refs, no legacy lifecycle methods)
• The react-scripts (CRA) build tooling still works with React 19 via automatic peer dependency resolution
• react-transition-group still references findDOMNode internally (even in 4.4.5), but the nodeRef prop we added to all CSSTransition usages ensures the findDOMNode code path is never executed
• @types/react and @types/react-dom are not direct dependencies (project is JavaScript, not TypeScript) — they exist only as transitive deps through react-scripts

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

---

Devin Review

Status	Commit
⚪ Not started	—

Run Devin Review

💡 Connect your GitHub account to enable automatic code reviews.

[devin-ai-integration]

🤖 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

[devin-ai-integration]

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no potential bugs to report.

View in Devin Review to see 2 additional findings.

[devin-ai-integration]

Testing Results — React 19 Upgrade

All 8 tests passed. Ran the app locally on React 19, testing all migrated components end-to-end via browser UI.

Devin session

Core Migration Tests

Test	Result
App renders on React 19 (createRoot)	Passed
Info modal opens/closes with fade transition (CSSTransition nodeRef)	Passed
Alert with fadeIn transition (Alert CSSTransition nodeRef)	Passed
Modal click-outside dismiss (split containerRef/modalRef)	Passed
Settings dark mode toggle (React 19 state management)	Passed
react-icons render (v4→v5 upgrade)	Passed
Game keyboard input (full render pipeline)	Passed
Console error check (no React warnings)	Passed

Screenshot Evidence

App Load + Info Modal	Game Board

Alert	Dark Mode Toggle OFF

Word Submission with Color Feedback

[devin-ai-integration]

🚩 react-scripts 5.0.0 may have compatibility issues with React 19

The PR upgrades to react@^19.0.0 and react-dom@^19.0.0 but keeps react-scripts at 5.0.0. CRA's react-scripts@5 was designed for React 17/18 and may have peer dependency warnings or subtle incompatibilities with React 19 (e.g., internal webpack/babel plugin assumptions). This likely works in practice but could cause issues with certain CRA internals or dev tooling.

---

Was this helpful? React with 👍 or 👎 to provide feedback.

[devin-ai-integration]

Acknowledged — this is a known tradeoff. react-scripts@5.0.1 is the latest release (Feb 2022), and CRA is effectively unmaintained, so there's no React 19-compatible version to upgrade to.

In practice, everything works:

• npm install resolves with automatic peer dependency overrides (no --legacy-peer-deps needed)
• npm run build compiles successfully
• npm start dev server runs without issues
• CI=true npm test passes
• End-to-end UI testing confirmed no runtime issues

A full migration to Vite would eliminate this concern entirely but is a larger effort beyond the scope of this React version upgrade. If the team wants to pursue that as a follow-up, it would be a clean next step.