useMemoProfiling
Description and use case
useMemoProfiling wraps useMemo and records cache effectiveness. Use it to validate whether memoization actually improves performance.
API signature
function useMemoProfiling<T>(factory: () => T, deps: DependencyList, label?: string): T;
function getStats(label?: string): MemoProfilingStats;
Parameters
| Name | Type | Required | Description |
|---|---|---|---|
factory | () => T | Yes | Computation callback, same as useMemo. |
deps | DependencyList | Yes | Dependency list controlling recomputation. |
label | string | No | Grouping key for logs and accumulated stats. |
Return value
| Field | Type | Description |
|---|---|---|
| Hook return | T | Memoized value produced by factory. |
getStats(label) | MemoProfilingStats | Returns cumulative hit/miss and recompute timing stats. |
Live interactive demo (StackBlitz)
GitHub Pages does not serve the isolation headers required for embedded StackBlitz WebContainers. Open the demo in StackBlitz to run it interactively.
Code example
import { getStats, useMemoProfiling } from 'react-perf-hooks';
type Props = { items: string[]; query: string };
export function FilteredList({ items, query }: Props) {
const filtered = useMemoProfiling(
() => items.filter((item) => item.includes(query)),
[items, query],
'FilteredList',
);
const stats = getStats('FilteredList');
return (
<div>
<p>
Hits: {stats.hits} | Misses: {stats.misses}
</p>
{filtered.map((item) => (
<div key={item}>{item}</div>
))}
</div>
);
}