chore(deps): upgrade React 18.3 → 19 - #3384
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (16)
✅ Files skipped from review due to trivial changes (9)
🚧 Files skipped from review as they are similar to previous changes (6)
📜 Recent review details🔇 Additional comments (2)
WalkthroughReact and related ecosystem packages are upgraded to React 19-compatible versions, and TypeScript ref, event, and component return types are adjusted across UI components to match the newer typings. ChangesReact 19 Upgrade
Estimated code review effort: 2 (Simple) | ~12 minutes Possibly related PRs
Suggested labels: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint install failed. For unrecoverable errors, disable the tool in CodeRabbit configuration. Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (4)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/ui/components/SideBar/ServerButton.tsx (1)
170-170: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick winUse
React.DragEventinServerButton.tsx
DragEventhere is the DOM type, but React passes a synthetic drag event toonDragOver. UseReact.DragEvent<HTMLElement>or let it infer the type so the handler stays consistent with the other drag callbacks and doesn’t mask type errors.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/ui/components/SideBar/ServerButton.tsx` at line 170, The onDragOver handler in ServerButton should not use the DOM DragEvent type, since React provides a synthetic drag event. Update the handler signature in ServerButton to use React.DragEvent<HTMLElement> or remove the explicit annotation so it aligns with the other drag callbacks and preserves proper type checking.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@src/ui/components/SideBar/ServerButton.tsx`:
- Line 170: The onDragOver handler in ServerButton should not use the DOM
DragEvent type, since React provides a synthetic drag event. Update the handler
signature in ServerButton to use React.DragEvent<HTMLElement> or remove the
explicit annotation so it aligns with the other drag callbacks and preserves
proper type checking.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: dfc01185-36bd-41d8-b393-525a31d6d26b
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (16)
package.jsonsrc/ui/components/AboutDialog/index.tsxsrc/ui/components/AddServerView/index.tsxsrc/ui/components/Dialog/hooks.tssrc/ui/components/Modal/ModalBackdrop.tsxsrc/ui/components/OutlookCredentialsDialog/index.tsxsrc/ui/components/SelectClientCertificateDialog/index.tsxsrc/ui/components/SideBar/ServerButton.tsxsrc/ui/components/SideBar/ServerInfoDropdown.tsxsrc/ui/components/SideBar/TooltipComponent.tsxsrc/ui/components/SideBar/useDropdownVisibility.tsxsrc/ui/components/utils/ReparentingContainer.tsxsrc/ui/components/utils/TooltipComponent.tsxsrc/ui/components/utils/TooltipContext.tsxsrc/ui/components/utils/TooltipProvider.tsxsrc/ui/test-utils.tsx
📜 Review details
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{tsx,ts}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{tsx,ts}: MANDATORY: Use Fuselage components for all UI work. Only create custom components when Fuselage doesn't provide what's needed
Import UI components from@rocket.chat/fuselageand checkTheme.d.tsfor valid color tokens
Use React functional components with hooks
Use PascalCase for component file names
Files:
src/ui/components/SideBar/useDropdownVisibility.tsxsrc/ui/components/utils/TooltipComponent.tsxsrc/ui/components/utils/ReparentingContainer.tsxsrc/ui/components/SideBar/ServerButton.tsxsrc/ui/components/SideBar/TooltipComponent.tsxsrc/ui/components/SelectClientCertificateDialog/index.tsxsrc/ui/components/utils/TooltipContext.tsxsrc/ui/components/OutlookCredentialsDialog/index.tsxsrc/ui/components/SideBar/ServerInfoDropdown.tsxsrc/ui/components/AboutDialog/index.tsxsrc/ui/components/AddServerView/index.tsxsrc/ui/components/Dialog/hooks.tssrc/ui/components/utils/TooltipProvider.tsxsrc/ui/test-utils.tsxsrc/ui/components/Modal/ModalBackdrop.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Redux actions must follow FSA (Flux Standard Action) pattern
Avoid unnecessary comments — write self-documenting code through clear naming
Always verify libraries by checking official docs and.d.tsfiles innode_modules/. Never assume props, tokens, or APIs work without verification
Avoid subjective descriptors ('smart', 'excellent', 'dumb') in documentation and comments
Use measurable descriptions in code documentation: 'reduced memory usage', 'improved by X%' instead of subjective claims
NEVER invent metrics — don't include estimated time spent or speculated user counts. Only include numbers from actual logs, error messages, or documented sources
Files:
src/ui/components/SideBar/useDropdownVisibility.tsxsrc/ui/components/utils/TooltipComponent.tsxsrc/ui/components/utils/ReparentingContainer.tsxsrc/ui/components/SideBar/ServerButton.tsxsrc/ui/components/SideBar/TooltipComponent.tsxsrc/ui/components/SelectClientCertificateDialog/index.tsxsrc/ui/components/utils/TooltipContext.tsxsrc/ui/components/OutlookCredentialsDialog/index.tsxsrc/ui/components/SideBar/ServerInfoDropdown.tsxsrc/ui/components/AboutDialog/index.tsxsrc/ui/components/AddServerView/index.tsxsrc/ui/components/Dialog/hooks.tssrc/ui/components/utils/TooltipProvider.tsxsrc/ui/test-utils.tsxsrc/ui/components/Modal/ModalBackdrop.tsx
**/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.ts: Use TypeScript for all new code unless explicitly told otherwise
Use optional chaining with fallbacks for platform-specific APIs instead of mocking when possible. Example:const uid = process.getuid?.() ?? 1000;
Files:
src/ui/components/Dialog/hooks.ts
🔇 Additional comments (17)
src/ui/components/Dialog/hooks.ts (1)
9-9: LGTM!src/ui/components/AboutDialog/index.tsx (1)
249-249: LGTM!src/ui/components/Modal/ModalBackdrop.tsx (1)
26-26: LGTM!Also applies to: 35-35, 87-87
src/ui/components/SideBar/ServerInfoDropdown.tsx (1)
8-9: LGTM!src/ui/components/SideBar/useDropdownVisibility.tsx (1)
21-22: LGTM!src/ui/test-utils.tsx (1)
37-37: LGTM!package.json (1)
83-89: 🔒 Security & PrivacyConfirm React 19 peer support for the remaining packages
react/react-domare aligned at19.2.7, andreact-redux@9.3.0plus@testing-library/react@16.3.2already include React 19 in their peer ranges.react-hook-form@7.80.0,react-i18next@15.7.4, andreact-virtuoso@4.18.10still need an explicit registry/docs check before this bump is treated as safe.src/ui/components/AddServerView/index.tsx (2)
15-15: LGTM!
116-116: LGTM!src/ui/components/OutlookCredentialsDialog/index.tsx (2)
48-48: LGTM!
177-179: LGTM!src/ui/components/SelectClientCertificateDialog/index.tsx (1)
27-27: LGTM!src/ui/components/utils/TooltipProvider.tsx (1)
14-14: LGTM!src/ui/components/SideBar/TooltipComponent.tsx (1)
17-17: LGTM!src/ui/components/utils/ReparentingContainer.tsx (1)
17-19: LGTM!src/ui/components/utils/TooltipComponent.tsx (1)
17-17: LGTM!src/ui/components/utils/TooltipContext.tsx (1)
4-4: LGTM!
| "react-dom": "~19.2.7", | ||
| "react-hook-form": "~7.80.0", | ||
| "react-i18next": "~15.7.4", | ||
| "react-keyed-flatten-children": "~3.0.0", |
There was a problem hiding this comment.
react-is is now a peer dependency of react-keyed-flatted-children but it's not listed here. react-keyed-flatted-children itself might be upgraded to 5.x for compatibility with the latest @rocket.chat/fuselage.
Core: react/react-dom 18.3.1→19.2.7, @types/react 18.3→19.2.17, @types/react-dom 18.3→19.2.3. Ecosystem floors for React 19 peer support: - react-redux 9.0.4→9.3.0 - react-i18next 14.0.0→15.7.4 - react-hook-form 7.49.2→7.80.0 - react-virtuoso 4.6.2→4.18.10 - @testing-library/react 14.3.1→16.3.2 (+ @testing-library/dom →10.4.0) Source migration (minimal — 15 files): - types-react-codemod preset-19: useRef<T>() → useRef<T>(undefined), RefObject<T> → RefObject<T|null>, ReactElement → ReactElement<any> (13 files) - AddServerView: FormEvent<HTMLFormElement> → SubmitEvent<HTMLElement> (matches Fuselage Box onSubmit under React 19 types) - ServerButton: explicit DragEvent annotation on onDragOver handler Verified: tsc + eslint clean, rollup build resolves all imports, 921 tests pass (RTL 16 + React 19 under jest-electron-runner, no act() warnings), fuselage-gate type+companion green. Stacks on #3383 (fuselage 0.80, which ships React 19 peer support).
dcd7778 to
a1bde8f
Compare
2 participants
CORE-2398
What changed
Upgrades the renderer from React 18.3.1 → React 19.2.7, plus the ecosystem libraries to their React-19-compatible floors.
Core
Ecosystem floors (minimum versions that peer-support React 19)
^18 || ^19at 9.2.0<Trans>fixes (i18next core unchanged)^19added at 7.51No change needed:
redux,react-keyed-flatten-children,@testing-library/user-event,@testing-library/jest-dom,i18nextcore.@kayahr/jest-electron-runneris React-agnostic — its patch is untouched.Source migration (minimal — 15 files)
The codebase was already React-19-ready in structure: all roots use
createRoot, nodefaultProps/propTypes/string-refs/legacy-context/react-test-renderer/findDOMNode. The only changes are type-level, driven by@types/react19:types-react-codemodpreset-19 (13 files):useRef<T>()→useRef<T>(undefined),RefObject<T>→RefObject<T | null>,ReactElement→ReactElement<any>.AddServerView:FormEvent<HTMLFormElement>→SubmitEvent<HTMLElement>— matches what FuselageBox'sonSubmitnow declares under React 19 (Box extends AllHTMLAttributes<HTMLElement>).ServerButton: explicitDragEventannotation on theonDragOverhandler (React 19 no longer infers the param there); matches the sibling drag handlers.No
anycasts or@ts-ignorewere introduced.Verification
yarn lint— ESLint + tsc clean across the tree (against@types/react19).yarn build— rollup bundles main + renderer + preload; all React 19 + Fuselage 0.80 imports resolve.yarn test— 921 passed / 2 skipped / 53 suites. RTL 16.3.2 + React 19.2.7 render under@kayahr/jest-electron-runner. Noact()deprecation warnings.Reviewer notes
windowby default (caught errors fire error boundaries /onUncaughtError). If any globalwindow.onerrorlogging relied on the old rethrow, confirm it still captures. Worth a manualyarn startsmoke of the renderer console.build-artifactslabel.Summary by CodeRabbit
Bug Fixes
Chores