use-memoize

Cache a function's results per argument list.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/composable

Import the entry directly. Call lifecycle-bound utilities inside <script setup> so cleanup follows the component scope; consult the runtime contract for this entry's SSR and hydration behavior.

import { useMemoize } from "@vizejs/composable/use-memoize";

Try it

Reuse a shipping quote

Cache the result of an expensive calculation per argument and reuse it on the next call.

Open the interactive example

What to observe: Get quote for Europe calculates once; asking again keeps Calculated 1 times. Asia adds a calculation; Forget quotes clears the cache so Europe is calculated again.

getKey turns arguments into a cache key. The memoized function also exposes load, delete and clear. Call it from an event handler, not from the template.

Compare the initial and interacted states

Copy the example

Save this complete SFC in your Vue project. Its public imports and source are the same ones executed in the preview.

<script setup lang="ts">
import { ref } from "vue";
import { useMemoize } from "@vizejs/composable/use-memoize";

const calculations = ref(0);
const quote = useMemoize(
  (zone: string) => {
    calculations.value += 1;
    return zone === "Europe" ? 12 : zone === "Asia" ? 18 : 25;
  },
  { getKey: (zone: string) => zone },
);
const zone = ref("Europe");
const price = ref<number>();

function getQuote() {
  price.value = quote(zone.value);
}
</script>

<template>
  <div class="composable-example">
    <p>Reuse an expensive shipping quote for a zone you already asked about.</p>
    <label>
      Shipping zone
      <select v-model="zone">
        <option>Europe</option>
        <option>Asia</option>
        <option>Americas</option>
      </select>
    </label>
    <div class="example-actions">
      <button type="button" @click="getQuote">Get quote</button>
      <button type="button" @click="() => quote.clear()">Forget quotes</button>
    </div>
    <output aria-live="polite"
      >{{ price === undefined ? "No quote yet." : `Shipping: €${price}` }} · Calculated
      {{ calculations }} times</output
    >
  </div>
</template>

Runtime contract

API

useMemoize

Cache a function's results per argument list. The default cache is a reactive Map, so computeds and templates that read a memoized value re-evaluate after load, delete, or clear. Promise-returning resolvers cache the promise itself, which deduplicates concurrent requests. Keys default to JSON.stringify(args) (a string); a custom getKey sets the key type, and a custom cache must use that key type. On the server keep memoized caches request-local (create them in setup), since a module-level cache is shared across requests.

function useMemoize<Arguments extends readonly unknown[], Result, Key>( resolver: (...args: Arguments) => Result, options: UseMemoizeOptions<Arguments, Key, Result> & { readonly getKey: (...args: Arguments) => Key; }, ): Memoized<Arguments, Result, Key>

const getUser = useMemoize((id: string) => fetchUser(id), { getKey: (id) => id });
const user = computed(() => getUser(props.id));
getUser.load(props.id); // refresh

useMemoize

function useMemoize<Arguments extends readonly unknown[], Result>( resolver: (...args: Arguments) => Result, options?: UseMemoizeOptions<Arguments, string, Result>, ): Memoized<Arguments, Result, string>

useMemoize

function useMemoize( resolver: (...args: readonly unknown[]) => unknown, options: UseMemoizeOptions<readonly unknown[], unknown, unknown> = {}, ): Memoized<readonly unknown[], unknown, unknown>

Types

MemoizeCache

Minimal cache contract used by useMemoize; a Map satisfies it.

UseMemoizeOptions

Options for useMemoize.

Memoized

Memoized function returned by useMemoize.