Skip to content
On this page

useMemoize

Category
Export Size
1 kB
Last Changed
last month

Cache results of functions depending on arguments and keep it reactive. It can also be used for asynchronous functions and will reuse existing promises to avoid fetching the same data at the same time.

TIP

The results are not cleared automatically. Call clear() in case you no longer need the results or use own caching mechanism to avoid memory leaks.

Usage

ts
import { useMemoize } from '@vueuse/core'

const getUser = useMemoize(
  async (userId: number): Promise<UserData> =>
    axios.get(`users/${userId}`).then(({ data }) => data),
)

const user1 = await getUser(1) // Request users/1
const user2 = await getUser(2) // Request users/2
// ...
const user1 = await getUser(1) // Retrieve from cache

// ...
const user1 = await getUser.load(1) // Request users/1

// ...
getUser.delete(1) // Delete cache from user 1
getUser.clear() // Clear full cache
import { useMemoize } from '@vueuse/core'

const getUser = useMemoize(
  async (userId: number): Promise<UserData> =>
    axios.get(`users/${userId}`).then(({ data }) => data),
)

const user1 = await getUser(1) // Request users/1
const user2 = await getUser(2) // Request users/2
// ...
const user1 = await getUser(1) // Retrieve from cache

// ...
const user1 = await getUser.load(1) // Request users/1

// ...
getUser.delete(1) // Delete cache from user 1
getUser.clear() // Clear full cache

Combine with computed or asyncComputed to achieve reactivity:

ts
const user1 = asyncComputed(() => getUser(1))
// ...
await getUser.load(1) // Will also update user1
const user1 = asyncComputed(() => getUser(1))
// ...
await getUser.load(1) // Will also update user1

Resolving cache key

The key for caching is determined by the arguments given to the function and will be serialized by default with JSON.stringify. This will allow equal objects to receive the same cache key. In case you want to customize the key you can pass getKey

ts
const getUser = useMemoize(
  async (userId: number, headers: AxiosRequestHeaders): Promise<UserData> =>
    axios.get(`users/${userId}`, { headers }).then(({ data }) => data),
  {
    // Use only userId to get/set cache and ignore headers
    getKey: (userId, headers) => userId,
  },
)
const getUser = useMemoize(
  async (userId: number, headers: AxiosRequestHeaders): Promise<UserData> =>
    axios.get(`users/${userId}`, { headers }).then(({ data }) => data),
  {
    // Use only userId to get/set cache and ignore headers
    getKey: (userId, headers) => userId,
  },
)

WARNING

For Vue 2 the key has to be a string or number

Customize cache mechanism

By default, the results are cached within a Map (normal object for Vue 2). You can implement your own mechanism by passing cache as options with following structure:

ts
export interface MemoizeCache<Key, Value> {
  /**
   * Get value for key
   */
  get (key: Key): Value | undefined
  /**
   * Set value for key
   */
  set (key: Key, value: Value): void
  /**
   * Return flag if key exists
   */
  has (key: Key): boolean
  /**
   * Delete value for key
   */
  delete (key: Key): void
  /**
   * Clear cache
   */
  clear (): void
}
export interface MemoizeCache<Key, Value> {
  /**
   * Get value for key
   */
  get (key: Key): Value | undefined
  /**
   * Set value for key
   */
  set (key: Key, value: Value): void
  /**
   * Return flag if key exists
   */
  has (key: Key): boolean
  /**
   * Delete value for key
   */
  delete (key: Key): void
  /**
   * Clear cache
   */
  clear (): void
}

Type Declarations

Show Type Declarations
typescript
declare type CacheKey = any
/**
 * Custom memoize cache handler
 */
export interface UseMemoizeCache<Key, Value> {
  /**
   * Get value for key
   */
  get(key: Key): Value | undefined
  /**
   * Set value for key
   */
  set(key: Key, value: Value): void
  /**
   * Return flag if key exists
   */
  has(key: Key): boolean
  /**
   * Delete value for key
   */
  delete(key: Key): void
  /**
   * Clear cache
   */
  clear(): void
}
/**
 * Memoized function
 */
export interface UseMemoizeReturn<Result, Args extends unknown[]> {
  /**
   * Get result from cache or call memoized function
   */
  (...args: Args): Result
  /**
   * Call memoized function and update cache
   */
  load(...args: Args): Result
  /**
   * Delete cache of given arguments
   */
  delete(...args: Args): void
  /**
   * Clear cache
   */
  clear(): void
  /**
   * Generate cache key for given arguments
   */
  generateKey(...args: Args): CacheKey
  /**
   * Cache container
   */
  cache: UseMemoizeCache<CacheKey, Result>
}
export interface UseMemoizeOptions<Result, Args extends unknown[]> {
  getKey?: (...args: Args) => string | number
  cache?: UseMemoizeCache<CacheKey, Result>
}
/**
 * Reactive function result cache based on arguments
 */
export declare function useMemoize<Result, Args extends unknown[]>(
  resolver: (...args: Args) => Result,
  options?: UseMemoizeOptions<Result, Args>
): UseMemoizeReturn<Result, Args>
declare type CacheKey = any
/**
 * Custom memoize cache handler
 */
export interface UseMemoizeCache<Key, Value> {
  /**
   * Get value for key
   */
  get(key: Key): Value | undefined
  /**
   * Set value for key
   */
  set(key: Key, value: Value): void
  /**
   * Return flag if key exists
   */
  has(key: Key): boolean
  /**
   * Delete value for key
   */
  delete(key: Key): void
  /**
   * Clear cache
   */
  clear(): void
}
/**
 * Memoized function
 */
export interface UseMemoizeReturn<Result, Args extends unknown[]> {
  /**
   * Get result from cache or call memoized function
   */
  (...args: Args): Result
  /**
   * Call memoized function and update cache
   */
  load(...args: Args): Result
  /**
   * Delete cache of given arguments
   */
  delete(...args: Args): void
  /**
   * Clear cache
   */
  clear(): void
  /**
   * Generate cache key for given arguments
   */
  generateKey(...args: Args): CacheKey
  /**
   * Cache container
   */
  cache: UseMemoizeCache<CacheKey, Result>
}
export interface UseMemoizeOptions<Result, Args extends unknown[]> {
  getKey?: (...args: Args) => string | number
  cache?: UseMemoizeCache<CacheKey, Result>
}
/**
 * Reactive function result cache based on arguments
 */
export declare function useMemoize<Result, Args extends unknown[]>(
  resolver: (...args: Args) => Result,
  options?: UseMemoizeOptions<Result, Args>
): UseMemoizeReturn<Result, Args>

Source

SourceDocs

Contributors

Anthony Fu
Mikhailov Nikita
Jelf
freakzlike

Changelog

v9.2.0 on 9/5/2022
06ad0 - fix: allow number in getKey (#2074)
v8.9.3 on 7/14/2022
5ef88 - fix!: rename type UseMemoizedFn to UseMemoizeReturn and new type UseMemoizeOptions (#1872)
v7.5.0 on 12/31/2021
9645f - feat: new function (#1045)

Released under the MIT License.