useCallback Vs useMemo 中，第二个参数传入空数组和不传的区别

最新推荐文章于 2025-08-27 02:09:29 发布

原创最新推荐文章于 2025-08-27 02:09:29 发布 · 5.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #typescript

本文介绍了在React中，useCallback和useMemo函数的第二个参数为空数组与不传的区别。当参数为空数组时，返回值仅计算一次；若未提供数组，每次渲染都将重新计算，导致失去缓存效果。

1. 引用

For both useMemo and useCallback (which is essentially just a special case of useMemo), if the second argument is an empty array, the value will be memoized once and always returned.

If the second argument is omitted, the value will never be memoized, and the useCallback and the useMemo doesn’t do anything.

statck overflow

2. 解释

// Require a second argument, and it must be an array
function useCallback<T extends (...args: any[]) => any>(callback: T, deps: DependencyList): T;

// Second argument can be undefined, but must be explicitly passed as undefined, not omitted.
function useMemo<T>(factory: () => T, deps: DependencyList | undefined): T;