bump React from 18 to 19 #690

li-jia-nan · 2025-10-02T14:46:44Z

Summary by CodeRabbit

Chores
- 升级 React、React DOM、react-is 至 19.x 并同步更新相关 @types 依赖；peerDependencies 兼容范围保持不变。
Refactor
- 多处将 refs 明确类型并以 null 初始化，精简内部事件钩子类型，提升类型安全且不影响运行时或对外 API。
Documentation
- 示例中统一使用显式泛型与 null 初始化的 refs，改善可读性与一致性。
Tests
- 移除或更新若干针对 React 19 的 mock 与测试文件，调整测试中 refs 与 cloneElement 的类型期望以适配 React 19 行为。

vercel · 2025-10-02T14:46:50Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
util	Ready	Preview	Comment	Oct 2, 2025 3:15pm

coderabbitai · 2025-10-02T14:46:52Z

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Walkthrough

本次变更将多处 React refs 显式初始化为 null 并补充泛型类型；测试相应调整类型注解并移除部分对 React19 的 Jest mock；同时将 React 及相关类型依赖升级到 19.2.0。未改动公开 API 或运行时控制流。

Changes

Cohort / File(s)	Summary of Changes
Docs 示例 refs 初始化 `docs/examples/getScrollBarSize.tsx`, `docs/examples/portal.tsx`	将 `useRef()` 改为 `useRef<...>(null)`，为 DOM refs 添加显式泛型并以 `null` 初始化；仅类型层面变化，无运行时逻辑改动。
核心组件与 Hook 类型收紧 `src/Portal.tsx`, `src/hooks/useEvent.ts`	内部 refs 改为 `useRef<...>(null)`（如 `ParentNode` / `HTMLElement` / 回调类型），增强类型安全与空值约束；行为不变。
测试类型适配与 mock 移除 `tests/ref.test.tsx`, `tests/ref-19.test.tsx`, `tests/toArray-19.test.tsx`, `tests/hooks-17.test.tsx`	测试中将 refs 明确为 `useRef<...>(null)` 等；移除若干针对 React19 的 `jest.mock` 调用；调整 `React.cloneElement<any>` 与组件 props 类型为 `React.PropsWithChildren<any>`；删除一个针对 useId 的旧测试文件。均为测试/类型适配更改。
依赖升级至 React 19 `package.json`	将 `react`、`react-dom`、`react-is` 及相关 `@types/*` 升级到 `^19.2.0`（移除部分 npm alias 配置），peerDependencies 兼容声明保持对 >=18 的支持。

Sequence Diagram(s)

（此变更仅限类型与依赖调整，未引入新的控制流或交互，无需序列图）

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

chore: support Ref check update #594 — 与 React 19 的 ref 行为与测试调整高度相关，可能覆盖相同的 ref/supportRef 改动点。
refactor: use props check instead of version check #593 — 涉及 React-19 兼容与测试修正，与本 PR 在依赖和测试改动上有交集。
chore: one more check for null #602 — 包含对 supportRef 行为的更改与测试项，可能与本次测试期望调整相关。

Suggested reviewers

zombieJ

Poem

小兔把线理成绳，
引用归于 null 心宁。
十九新叶悄然生，
测试静好无纷争。
依赖攀升步轻盈，🐇✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	该标题简明扼要地描述了此次拉取请求的主要变更，即将项目依赖从 React 18 升级到 React 19，与更改集中对 package.json 及相关类型和测试的修改一致，易于历史记录浏览时快速理解。
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch react-19-up

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 18fb369 and dcabdc2.

📒 Files selected for processing (2)

tests/hooks-17.test.tsx (0 hunks)
tests/ref.test.tsx (4 hunks)

💤 Files with no reviewable changes (1)

tests/hooks-17.test.tsx

🧰 Additional context used

🧬 Code graph analysis (1)

tests/ref.test.tsx (1)

src/ref.ts (2)

supportRef (42-74)

supportNodeRef (84-88)

🔇 Additional comments (4)

tests/ref.test.tsx (4)

59-61: 类型注解正确且有助于类型安全。

为 ref1 和 ref2 添加 React.useRef<HTMLButtonElement>(null) 的显式类型注解，与后续在第 67 行使用的 <button> 元素相匹配，提升了类型安全性。

119-119: 测试断言正确反映 React 19 行为。

根据 src/ref.ts 中 supportRef 的实现（第 46-48 行），React 19 对所有 React 元素默认返回 true，因为 ref 已整合到 props 中。此断言更改与新行为一致。

165-165: 测试断言正确区分组件类型与渲染元素。

第 164 行验证 supportRef(MemoFC) 返回 false（未使用 forwardRef 包裹的 memo 组件类型），而第 165 行验证渲染后的元素在 React 19 中支持 ref。这种区分准确反映了 React 19 的 ref 处理机制。

198-198: 测试断言正确验证 React 19 的 ref 支持。

在 React 19 中，supportNodeRef(<FC />) 返回 true，因为 supportRef 实现（src/ref.ts 第 46-48 行）对 React 19+ 的所有 React 元素返回 true。此更改准确反映了新的 ref 处理逻辑。

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

gemini-code-assist · 2025-10-02T14:47:02Z

Summary of Changes

Hello @li-jia-nan, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request focuses on a significant upgrade of the project's React dependency from version 18 to 19. The changes involve updating the package.json to reflect the new React versions and their associated type definitions. Additionally, several TypeScript adjustments were made across various files, primarily to explicitly initialize useRef hooks with null and to handle type compatibility with React.cloneElement, ensuring the codebase remains robust and type-safe with the latest React version.

Highlights

React Version Bump: Upgraded the core React and React DOM dependencies from version 18 to 19, along with their corresponding type definitions and react-is.
TypeScript Type Safety Enhancements: Modified several React.useRef calls across example and source files to explicitly initialize with null, improving type inference and aligning with stricter type checking practices for React 19.
Dependency Cleanup: Removed the react-19 and react-dom-19 aliases from package.json as React 19 is now the primary version.
Test File Adjustments: Applied a type assertion to React.cloneElement in tests/ref-19.test.tsx to ensure compatibility with React 19's type definitions.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

socket-security · 2025-10-02T14:47:29Z

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@types/react-dom@18.3.7 ⏵ 19.2.0
	@types/react@18.3.25 ⏵ 19.2.0	⁺¹
	react-is@19.2.0

View full report

gemini-code-assist

Code Review

This pull request upgrades React from version 18 to 19. The changes primarily involve updating dependencies in package.json and modifying useRef calls to align with React 19's new requirements, such as initializing DOM refs with null. Most of the changes are correct and necessary for the upgrade. However, I found a critical issue in src/hooks/useEvent.ts where a useRef call was updated incorrectly, leading to a read-only ref being mutated. My review includes a specific suggestion to fix this typing issue.

src/hooks/useEvent.ts

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (2)

tests/ref-19.test.tsx (1)
42-42: 建议使用更具体的类型而非 any。

当前使用 React.cloneElement<any> 削弱了类型安全性。考虑使用更具体的类型，例如：
-          {React.cloneElement<any>(children, { ref: mergedRef })}
+          {React.cloneElement<React.ReactElement>(children, { ref: mergedRef })}
不过，如果 React 19 的类型定义导致更具体的类型出现冲突，当前的 <any> 用法在测试场景中是可以接受的。
tests/toArray-19.test.tsx (1)
5-5: 考虑使用更具体的基础类型。

当前使用 React.PropsWithChildren<any> 中的 any 可以进一步具体化。由于该组件不需要额外的 props，可以使用空对象类型：
-class UL extends React.Component<React.PropsWithChildren<any>> {
+class UL extends React.Component<React.PropsWithChildren<{}>> {
或者使用 Record<string, never> 来明确表示没有额外属性：
-class UL extends React.Component<React.PropsWithChildren<any>> {
+class UL extends React.Component<React.PropsWithChildren<Record<string, never>>> {
不过在测试场景中，当前的实现也是可以接受的。

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7e080a1 and 18fb369.

📒 Files selected for processing (3)

package.json (2 hunks)
tests/ref-19.test.tsx (1 hunks)
tests/toArray-19.test.tsx (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

GitHub Check: test / react component workflow
GitHub Check: test / react component workflow

🔇 Additional comments (1)

package.json (1)

42-42: 依赖升级正确且一致。

所有 React 相关的依赖和类型定义都已正确升级到 v19.2.0，保持了版本一致性。peerDependencies 保持 >=18.0.0 也是合理的，确保了对 React 18 和 19 的兼容性。

Also applies to: 50-52, 67-68

codecov · 2025-10-02T15:17:02Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 88.70%. Comparing base (1d5ae86) to head (dcabdc2).

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #690      +/-   ##
==========================================
- Coverage   90.28%   88.70%   -1.59%     
==========================================
  Files          37       37              
  Lines         885      885              
  Branches      301      301              
==========================================
- Hits          799      785      -14     
- Misses         84       97      +13     
- Partials        2        3       +1

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

bump React from 18 to 19

31b7b1f

vercel bot deployed to Preview October 2, 2025 14:47 View deployment

Merge branch 'master' into react-19-up

7e080a1

gemini-code-assist bot reviewed Oct 2, 2025

View reviewed changes

src/hooks/useEvent.ts Show resolved Hide resolved

vercel bot deployed to Preview October 2, 2025 14:49 View deployment

li-jia-nan added 2 commits October 2, 2025 22:56

Merge branch 'master' into react-19-up

bc567b4

clear

18fb369

vercel bot deployed to Preview October 2, 2025 14:57 View deployment

coderabbitai bot reviewed Oct 2, 2025

View reviewed changes

up

5f87748

vercel bot deployed to Preview October 2, 2025 15:06 View deployment

update

dcabdc2

vercel bot deployed to Preview October 2, 2025 15:15 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

bump React from 18 to 19 #690

bump React from 18 to 19 #690

li-jia-nan commented Oct 2, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

vercel bot commented Oct 2, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Oct 2, 2025 •

edited

Loading

Other AI code review bot(s) detected

Uh oh!

gemini-code-assist bot commented Oct 2, 2025

Uh oh!

socket-security bot commented Oct 2, 2025 •

edited

Loading

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

Uh oh!

coderabbitai bot left a comment

Uh oh!

codecov bot commented Oct 2, 2025

Uh oh!

Uh oh!

bump React from 18 to 19 #690

Are you sure you want to change the base?

bump React from 18 to 19 #690

Conversation

li-jia-nan commented Oct 2, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

vercel bot commented Oct 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Oct 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Other AI code review bot(s) detected

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

Pre-merge checks and finishing touches

Uh oh!

gemini-code-assist bot commented Oct 2, 2025

Summary of Changes

Highlights

Footnotes

Uh oh!

socket-security bot commented Oct 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

codecov bot commented Oct 2, 2025

Codecov Report

Uh oh!

Uh oh!

li-jia-nan commented Oct 2, 2025 •

edited by coderabbitai bot

Loading

vercel bot commented Oct 2, 2025 •

edited

Loading

coderabbitai bot commented Oct 2, 2025 •

edited

Loading

socket-security bot commented Oct 2, 2025 •

edited

Loading