Memo

function memo<R>(fn: ($: TrackFunc, _: TrackFunc) => R): Source<R>

type TrackFunc = <T>(source: Source<T>) => T

                     a:  -----4------6-----4-|
                     b:  -2-------2-----3------6--|
memo($ => $(a) % $(b)):  -----0------------1---4--|

Like expr(), creates an expression of other sources, but with following differences:

• memo() only runs the expression when one of the actively tracked sources has emitted a value different from its last emitted value
• memo() only emits a new value when the expression returns a value different from its last result.

Example:

HTML Code

<input type="number" id="a" />
<input type="number" id="b" />
<div></div>

import { pipe, event, memo, debounce, observe, tap, map } from 'streamlets'

const $a = document.querySelector('#a')
const $b = document.querySelector('#b')
const $div = document.querySelector('div')

const read = input => pipe(
  event(input, 'input'),
  map(() => parseInt(input.value, 10)),
  debounce(200)
)

const a = read($a)
const b = read($b)
let count = 0

pipe(
  memo(($) => $(a) % $(b)),
  tap(() => count++),
  tap(x => ($div.textContent = `(${count}) ${x}`)),
  observe
)

👉 Read the entry on expr() for more details.

---

📖 READ NEXT: Sources

---