# use-reduce-memo

> `useReduceMemo` is a React Hook that lets you cache the result of a reduce function between re-renders.

Latest version **0.1.0** (published 2025-10-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install use-reduce-memo
pnpm add use-reduce-memo
yarn add use-reduce-memo
bun add use-reduce-memo
```

## Health

**Score 65/100 (B)** — status: stable.

Positive: has types; esm support; no vulnerabilities; has provenance; high quality score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2025-10-24 |
| First published | 2025-07-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 26.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 0 |
| Author | William Wong |
| Maintainers | compulim |
| Keywords | react, react-hook, react-hooks |

## Links

- npm: https://www.npmjs.com/package/use-reduce-memo
- Repository: https://github.com/compulim/use-reduce-memo
- Homepage: https://github.com/compulim/use-reduce-memo#readme
- Issues: https://github.com/compulim/use-reduce-memo/issues
- npm.io page: https://npm.io/package/use-reduce-memo

## Dependencies (3)

- [valibot](https://npm.io/package/valibot.md) ^1.1.0
- [handler-chain](https://npm.io/package/handler-chain.md) ^0.1.0
- [use-reduce-memo](https://npm.io/package/use-reduce-memo.md) ^0.1.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2025-10-24
- 0.1.1-main.202601021031.1af9629 (main) — 2026-01-02
- 0.1.1-main.202512261016.0dcff4d — 2025-12-26
- 0.1.1-main.202512260123.a875ecb — 2025-12-26
- 0.1.1-main.202512180543.f073be2 — 2025-12-18
- 0.1.1-main.f7f506d — 2025-10-24
- 0.1.0-main.c358194 — 2025-10-24
- 0.1.0-main.6471265 — 2025-09-02
- 0.1.0-main.1384637 — 2025-07-28
- 0.1.0-main.9468560 — 2025-07-28
- 0.1.0-main.9e1f87e — 2025-07-28
- 0.1.0-main.ab5bccd — 2025-07-28
- 0.1.0-main.62efc63 — 2025-07-28
- 0.1.0-main.23f0607 — 2025-07-27
- 0.1.0-main.04cde62 — 2025-07-27

## README

# `use-reduce-memo`

`useReduceMemo` is a React Hook that lets you cache the result of a reduce function between re-renders.

## Background

[`useMemo`](https://react.dev/reference/react/useMemo) remembers the result of a single operation. This is sometimes insufficient for complex applications. Multiple components could be used to house individual operation, this may not be desirable in some cases.

`useReduceMemo` is similar to [`Array.reduce`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) and [`Iterator.reduce`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Iterator/reduce), which perform operations on every element and the result is memoized. In the next render, if the operation has already performed on the same element, it will be skipped.

## Demo

Click here for [our live demo](https://compulim.github.io/use-reduce-memo/).

## How to use?

The following sample passes an array of `[1, 2, 3]` to an accumulative reducer. The return is the total sum of all values.

```ts
function MyComponent() {
  const array = [1, 2, 3];
  const accumulator = useCallback((result, value) => value + result, []);

  const result = useReduceMemo<number, number>(array, accumulator, 0);

  // Would print 6.
  return <Fragment>{result}</Fragment>;
}
```

## API

```ts
function useReduceMemo<T, U>(
  target: readonly T[] | Iterable<T>,
  callbackfn: (previousValue: U, currentValue: T, currentIndex: number, target: readonly T[] | Iterable<T>) => U,
  initialValue: U
): U;
```

The API is very similar to [`Array.reduce`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) and [`Iterator.reduce`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Iterator/reduce). The target must be passed as the first value to the hook.

Notes: `callbackfn` should be memoized with [`useCallback`](https://react.dev/reference/react/useCallback) or [`useMemo`](https://react.dev/reference/react/useMemo). If `callbackfn` is changed, all memoized results will be invalidated.

## Design

We started the journey with a memoized mapper hook.

A mapper operates independently on each item, without requiring knowledge of other elements. Thus, in some cases, the mapper can be refactored into multiple components, each with their own call to [`useMemo`](https://react.dev/reference/react/useMemo). This limits the true utility of a memoized mapper.

In contrast, a memoized reducer could be turned into a memoized mapper. Thus, it shines in more scenarios.

## Behaviors

### How is the memoized result invalidated?

Each element in the array is _memoized individually and sequentially_. The equality check includes:

- The element value
- The `callbackfn`

The equality check is performed by the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) function. If an element is invalidated, all subsequent elements in the array will also be invalidated.

Given same instance of `callbackfn`:

- `[1, 2, 3]` followed by `[1, 2, 3, 4]` will call reducer 4 times with: `1, 2, 3, 4`
- `[1, 2, 3]` followed by `[1, 2, 4]` will call reducer 4 times with: `1, 2, 3, 4`
- `[1, 2, 3]` followed by `[1, 2, 2.5, 3]` will call reducer 5 times with: `1, 2, 3, 2.5, 3`
- `[1, 2, 3]` followed by `[1, 2]` will call reducer 3 times with: `1, 2, 3`
- `[1, 2, 3]` followed by `[]`, then followed by `[1, 2, 3]` will call reducer 6 times with: `1, 2, 3, 1, 2, 3`
- `[1, 2, 3]` followed by `[0, 1, 2, 3]` will call reducer 7 times with: `1, 2, 3, 0, 1, 2, 3`

## Contributions

Like us? [Star](https://github.com/compulim/use-reduce-memo/stargazers) us.

Want to make it better? [File](https://github.com/compulim/use-reduce-memo/issues) us an issue.

Don't like something you see? [Submit](https://github.com/compulim/use-reduce-memo/pulls) a pull request.

---
_Source: https://npm.io/package/use-reduce-memo · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._