deku-memoize

Higher-order Deku component to allow components to have a shouldUpdate method

Usage no npm install needed!

<script type="module">
  import dekuMemoize from 'https://cdn.skypack.dev/deku-memoize';
</script>

README

deku-memoize

Decorator to allow components to have a shouldUpdate method. For use with deku v2 or decca.

Status

Usage

dekuMemoize(component) takes in a deku Component, and returns another Component (a decorator). It will use the component's shouldUpdate funtion to check if there are updates to be done.

import dekuMemoize from 'deku-memoize'

function render ({ props }) {
  return <button>{ props.label }</button>
}

// `next` and `prev` are the parameters passed onto `render()`.
function shouldUpdate (next, prev) {
  return next.props.label !== prev.props.label
}

module.exports = dekuMemoize({ render, shouldUpdate })

shouldUpdate

shouldUpdate takes 2 arguments; both are the first parameters passed onto render(). If it returns true, then a render will be triggered; otherwise, render() will not be called.

shouldUpdate will not be called on the first render.

If shouldUpdate is not given, it will always re-render no matter what (default deku behavior).

Thanks

deku-memoize © 2015+, Rico Sta. Cruz. Released under the MIT License.
Authored and maintained by Rico Sta. Cruz with help from contributors (list).

ricostacruz.com  ·  GitHub @rstacruz  ·  Twitter @rstacruz