Hooks: useMemo

Create a memoized state value. Only reruns the function when dependent values have changed.

import { component, html, useState, useMemo } from 'haunted';

function fibonacci(num) {
  if (num <= 1) return 1;
  return fibonacci(num - 1) + fibonacci(num - 2);
}

function App() {
  const [value, setVal] = useState(12);
  const fib = useMemo(() => fibonacci(value), [value]);

  return html`
    <h1>Fibonacci</h1>
    <input type="number" max="35" step="1"
           @change=${e => setVal(parseInt(e.target.value))}
           value=${value} />
    <div>Fibonacci <strong>${fib}</strong></div>
  `;
}

customElements.define('use-memo', component(App));

API

useMemo

Parameters

fn

() => T

function to memoize

values

unknown[]

dependencies to the memoized computation

Returns

Exports

import { useMemo } from 'haunted/lib/use-memo';