Skip to main content
useMemo memoizes the result of an expensive computation. It re-runs only when its dependencies change, preventing unnecessary work on every render and keeping your components fast when dealing with large datasets or costly transformations.

Signature

const value = useMemo(compute, deps)

Parameters

compute
function
required
The computation to memoize. Solar calls this function with no arguments and caches the return value. It runs again only when deps changes.
deps
array | object
required
The dependencies for the memoized value. When any value in deps changes (using a shallow comparison), Solar discards the cached result and re-runs compute. You can provide either an array or a plain object — both forms are supported.

Returns

value
any
The memoized return value of compute. Solar returns the cached value on every render until the dependencies change.

Example: Sorted list

const sortedItems = useMemo(
  () => [...items].sort((a, b) => a.name.localeCompare(b.name)),
  [items],
)

Object deps

Solar supports passing an object as deps in addition to an array. This is convenient when you have multiple named dependencies and prefer to keep them explicit.
const filtered = useMemo(
  () => users.filter(u => u.role === role && u.active === showActive),
  { users, role, showActive },
)
useMemo is a performance optimization, not an effect trigger. Don’t use it to run side effects like data fetching, subscriptions, or DOM mutations. Use useResource for async data and useSubscription for event listeners.