1---
2category: Utilities
3---
4 
5# useMemoize
6 
7Cache 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.
8 
9::: tip
10The results are not cleared automatically. Call `clear()` in case you no longer need the results or use own caching mechanism to avoid memory leaks.
11:::
12 
13## Usage
14 
15```ts
16import { useMemoize } from '@vueuse/core'
17 
18const getUser = useMemoize(
19  async (userId: number): Promise<UserData> =>
20    axios.get(`users/${userId}`).then(({ data }) => data),
21)
22 
23const user1 = await getUser(1) // Request users/1
24const user2 = await getUser(2) // Request users/2
25// ...
26const user1 = await getUser(1) // Retrieve from cache
27 
28// ...
29const user1 = await getUser.load(1) // Request users/1
30 
31// ...
32getUser.delete(1) // Delete cache from user 1
33getUser.clear() // Clear full cache
34```
35 
36Combine with `computed` or `computedAsync` to achieve reactivity:
37 
38```ts
39import { computedAsync, useMemoize } from '@vueuse/core'
40 
41const getUser = useMemoize(
42  async (userId: number): Promise<UserData> =>
43    axios.get(`users/${userId}`).then(({ data }) => data),
44)
45// ---cut---
46const user1 = computedAsync(() => getUser(1))
47// ...
48await getUser.load(1) // Will also update user1
49```
50 
51### Resolving cache key
52 
53The key for caching is determined by the arguments given to the function and will be serialized by default with `JSON.stringify`.
54This will allow equal objects to receive the same cache key. In case you want to customize the key you can pass `getKey`
55 
56::: warning Performance Consideration
57Using `JSON.stringify` as the default key generator can be **slow for large or complex objects**. For better performance with complex arguments, it's highly recommended to provide a custom `getKey` function that generates keys based on primitive values or unique identifiers.
58:::
59 
60#### Basic Example
61 
62```ts
63import { useMemoize } from '@vueuse/core'
64// ---cut---
65const getUser = useMemoize(
66  async (userId: number, headers: AxiosRequestHeaders): Promise<UserData> =>
67    axios.get(`users/${userId}`, { headers }).then(({ data }) => data),
68  {
69    // Use only userId to get/set cache and ignore headers
70    getKey: (userId, headers) => userId,
71  },
72)
73```
74 
75### Customize cache mechanism
76 
77By default, the results are cached within a `Map`. You can implement your own mechanism by passing `cache` as options with following structure:
78 
79```ts
80export interface MemoizeCache<Key, Value> {
81  /**
82   * Get value for key
83   */
84  get: (key: Key) => Value | undefined
85  /**
86   * Set value for key
87   */
88  set: (key: Key, value: Value) => void
89  /**
90   * Return flag if key exists
91   */
92  has: (key: Key) => boolean
93  /**
94   * Delete value for key
95   */
96  delete: (key: Key) => void
97  /**
98   * Clear cache
99   */
100  clear: () => void
101}
102```
103 
104## Type Declarations
105 
106```ts
107type CacheKey = any
108/**
109 * Custom memoize cache handler
110 */
111export interface UseMemoizeCache<Key, Value> {
112  /**
113   * Get value for key
114   */
115  get: (key: Key) => Value | undefined
116  /**
117   * Set value for key
118   */
119  set: (key: Key, value: Value) => void
120  /**
121   * Return flag if key exists
122   */
123  has: (key: Key) => boolean
124  /**
125   * Delete value for key
126   */
127  delete: (key: Key) => void
128  /**
129   * Clear cache
130   */
131  clear: () => void
132}
133/**
134 * Memoized function
135 */
136export interface UseMemoizeReturn<Result, Args extends unknown[]> {
137  /**
138   * Get result from cache or call memoized function
139   */
140  (...args: Args): Result
141  /**
142   * Call memoized function and update cache
143   */
144  load: (...args: Args) => Result
145  /**
146   * Delete cache of given arguments
147   */
148  delete: (...args: Args) => void
149  /**
150   * Clear cache
151   */
152  clear: () => void
153  /**
154   * Generate cache key for given arguments
155   */
156  generateKey: (...args: Args) => CacheKey
157  /**
158   * Cache container
159   */
160  cache: UseMemoizeCache<CacheKey, Result>
161}
162export interface UseMemoizeOptions<Result, Args extends unknown[]> {
163  getKey?: (...args: Args) => string | number
164  cache?: UseMemoizeCache<CacheKey, Result>
165}
166/**
167 * Reactive function result cache based on arguments
168 *
169 * @__NO_SIDE_EFFECTS__
170 */
171export declare function useMemoize<Result, Args extends unknown[]>(
172  resolver: (...args: Args) => Result,
173  options?: UseMemoizeOptions<Result, Args>,
174): UseMemoizeReturn<Result, Args>
175```
176