fix(useEvent): preserve handler context and improve typings#798
fix(useEvent): preserve handler context and improve typings#798li-jia-nan wants to merge 2 commits into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
React Doctor found no issues. 🎉
|
Walkthrough重构 ChangesuseEvent 重构
Estimated code review effort: 2 (Simple) | ~10 minutes Sequence Diagram(s)sequenceDiagram
participant React
participant useEvent
participant Callback
React->>useEvent: 渲染并传入最新 callback
useEvent->>useEvent: 更新 fnRef.current
React->>useEvent: 调用稳定函数
useEvent->>Callback: apply 最新回调与参数
Possibly related PRs
Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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 |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request refactors the useEvent hook to preserve the this context of the callback function by introducing overloads, a custom StableHandler type, and replacing useCallback with useState. The review feedback identifies a potential TypeScript compilation error under strictNullChecks because the optional callback parameter is passed to React.useRef without allowing undefined in its type parameter.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
src/hooks/useEvent.ts (1)
1-2: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value合并 React 导入语句
建议将
useState与默认的React导入合并，以提升代码整洁度。♻️ 建议修改
-import React from 'react'; -import { useState } from 'react'; +import React, { useState } from 'react';🤖 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/hooks/useEvent.ts` around lines 1 - 2, 合并 useEvent.ts 顶部的 React 与 useState 导入，使用单条导入语句保留默认 React 和命名导出 useState，并移除重复的独立导入。
🤖 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.
Inline comments:
In `@src/hooks/useEvent.ts`:
- Around line 24-25: Update the fnRef declaration in useEvent to allow an
undefined callback in its generic type, then move fnRef.current assignment out
of render and into a useLayoutEffect that tracks callback changes. Preserve the
existing stable-handler behavior and use the project’s SSR-safe layout-effect
wrapper if one exists.
- Around line 27-33: 在 useEvent 中构造 stableHandler 时添加类型断言，确保可选链调用推导出的 Result |
undefined 被转换为与重载签名一致的严格 Result 返回类型；若已将泛型重构为单一 T，则改用对应的 unknown 到 T 的断言。
- Around line 4-23: 恢复 useEvent 以单一函数类型泛型 T 为主的泛型契约，确保现有的
useEvent<SetDelayState<T>> 调用继续兼容；在 useEvent 的类型声明和实现中使用
ThisParameterType、Parameters 与 ReturnType 从 T 提取 this、参数及返回值类型，同时保留无参数调用的可选回调与
undefined 返回行为。
---
Nitpick comments:
In `@src/hooks/useEvent.ts`:
- Around line 1-2: 合并 useEvent.ts 顶部的 React 与 useState 导入，使用单条导入语句保留默认 React
和命名导出 useState，并移除重复的独立导入。
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 2e75365e-989c-4da6-aa1a-c88664e920ee
📒 Files selected for processing (1)
src/hooks/useEvent.ts
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #798 +/- ##
==========================================
+ Coverage 86.72% 86.74% +0.02%
==========================================
Files 40 40
Lines 1092 1094 +2
Branches 395 396 +1
==========================================
+ Hits 947 949 +2
Misses 143 143
Partials 2 2 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
✅ Preview is ready!
↩️ Previous: ⚡️ 🤖 Powered by surge-preview |
|||||||||||||||
There was a problem hiding this comment.
♻️ Duplicate comments (1)
src/hooks/useEvent.ts (1)
27-37: 🎯 Functional Correctness | 🔴 Critical | ⚡ Quick win修复内部实现中残留的 TypeScript 严格模式类型报错
遗留了之前 Review 中指出的两个内部类型隐患，会导致项目在 TypeScript 严格模式下编译报错：
useRef泛型缺失| undefined：参数callback是可选的（可为undefined），但传入useRef时泛型参数未包含| undefined，会导致类型不匹配报错。- 实现签名与重载签名不兼容：内部通过
fnRef.current?.apply()进行可选链调用，推导出的stableHandler返回类型包含| undefined，这与第一个重载签名强制要求的严格返回类型Result不兼容，会导致This overload signature is not compatible with its implementation signature.的编译报错。建议为
useRef补充| undefined并在构造stableHandler时补充类型断言以严格对齐重载签名。🐛 推荐的类型修复方案
- const fnRef = React.useRef<StableHandler<This, Args, Result>>(callback); + const fnRef = React.useRef<StableHandler<This, Args, Result> | undefined>(callback); useIsomorphicLayoutEffect(() => { fnRef.current = callback; }, [callback]); const [stableHandler] = useState(() => { - return function (this: This, ...args: Args) { - return fnRef.current?.apply(this, args); - }; + return (function (this: This, ...args: Args) { + return fnRef.current?.apply(this, args); + } as unknown as StableHandler<This, Args, Result>); });🤖 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/hooks/useEvent.ts` around lines 27 - 37, 在 useEvent 的内部实现中，将 fnRef 的 useRef 泛型扩展为 StableHandler<This, Args, Result> | undefined，以匹配可选 callback；同时为 useState 构造的 stableHandler 补充与重载返回类型一致的类型断言，确保 fnRef.current?.apply() 产生的可选返回值不会导致实现签名与重载签名不兼容。
🤖 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.
Duplicate comments:
In `@src/hooks/useEvent.ts`:
- Around line 27-37: 在 useEvent 的内部实现中，将 fnRef 的 useRef 泛型扩展为
StableHandler<This, Args, Result> | undefined，以匹配可选 callback；同时为 useState 构造的
stableHandler 补充与重载返回类型一致的类型断言，确保 fnRef.current?.apply()
产生的可选返回值不会导致实现签名与重载签名不兼容。
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: cd452ae5-4d5d-4374-a4b7-0d6e8f8258de
📒 Files selected for processing (2)
src/hooks/useDelayState.tssrc/hooks/useEvent.ts
Summary by CodeRabbit