升级React 18后UseCallback未导出 如何约束传入useCallback包裹的回调

核心认知澄清 #

首先明确两个基础事实：

• useCallback的作用是在依赖不变时缓存函数引用，它不会改变传入函数的类型，返回值和传入函数的类型完全一致，TypeScript 层面不存在任何特殊标记可以区分普通函数和被useCallback包裹的函数，因此从类型层面强制要求调用方传入useCallback包裹的回调，在技术上是不可能实现的。
• React 官方从未稳定导出过UseCallback类型，你之前能使用是旧版@types/react的非公开内部类型，本身不属于对外承诺的稳定API，升级后被移除属于正常的版本变更。

代码触发ESLint报错的原因 #

ReturnType<typeof useCallback<CallbackFn>>触发'>' expected解析错误，是因为当前使用的@typescript-eslint/parser版本不支持在typeof表达式后直接追加泛型参数的写法，属于解析器兼容问题。就算修复了解析错误，这个写法推导出来的类型就是你传入的CallbackFn本身，完全起不到校验“是否被useCallback包裹”的作用。

可行方案 #

推荐方案：直接定义回调函数类型 #

是否使用useCallback包裹回调是组件调用方基于自身性能优化需求做的决策，组件本身不需要也不应该做强制约束——哪怕传入未缓存的普通函数，只要业务逻辑正确，组件功能不会受任何影响。直接按函数本身的签名定义Props类型即可，这也是React官方推荐的标准写法：

interface MyComponentProps {
  onChange: (value: boolean) => void;
}

如果你是为了配合React.memo做子组件重渲染优化，不要把缓存责任甩给调用方，可以在组件内部自行处理引用稳定问题：

• 通用场景可以在组件内用useCallback对传入的回调包一层
• React 18.2+ 可以使用实验性的useEventHook固定回调引用，React 19中该API已稳定，名为useEffectEvent

语义标记方案（无实际强制效力） #

如果你只是想在类型定义上做语义标记，提示调用方尽量传入引用稳定的回调，可以自行定义一个无实际类型转换的别名，效果和旧版UseCallback完全一致：

// 语义上标记这是建议做引用稳定处理的回调，实际类型和原函数完全一致
type UseCallback<T extends (...args: any[]) => any> = T;

interface MyComponentProps {
  onChange: UseCallback<(value: boolean) => void>;
}

修复typeof useCallback写法的解析报错 #

如果你非要沿用ReturnType<typeof useCallback>的写法，可以通过提前声明泛型版本的Hook类型绕开解析器限制，注意最终推导结果和直接写函数签名没有任何区别：

type CallbackFn = (value: boolean) => void;
// 补全useCallback的泛型参数：第一个是回调类型，第二个是依赖数组类型
type MemoizedCallback = ReturnType<typeof useCallback<CallbackFn, Array<unknown>>>;

interface MyComponentProps {
  onChange: MemoizedCallback; // 推导结果为 (value: boolean) => void
}

内容的提问来源于stack exchange，提问作者MarksCode