react-memoise

A component to declaratively memoise a computation within a React component.

Usage no npm install needed!

<script type="module">
  import reactMemoise from 'https://cdn.skypack.dev/react-memoise';
</script>

README

Logo

馃摎 react-memoise - declaratively memoise a computation in a React component 馃

Given a component pass it some props and a computation and it will re-render with a memoised result.

鉂わ笍 React 路 Jest 路 Prettier 路 Flow 路 Enzyme 路 ESLint 路 Babel 路 Rollup 馃檹

CircleCI Status Codecov Coverage Status Made with Coffee

Installation

Just yarn add react-memoise or npm i react-memoise.

Documentation & Examples

Using the Function as a Child pattern

import Memoise from 'react-memoise';

const ParentComponent = props => (
  <Memoise args={[props.a, props.b]} compute={(a, b => a * b)}>
    {computedValue => <code>{computedValue}</code>}
  </Memoise>
);

Using a render-prop

import Memoise from 'react-memoise';

const ParentComponent = props => (
  <Memoise
    args={[props.a, props.b]}
    compute={(a, b => a * b)}
    render={computedValue => <code>{computedValue}</code>}
  />
);

Using a component

import Memoise from 'react-memoise';

const ConsumerComponent = props => <code>{props.computedValue}</code>;

const ParentComponent = props => (
  <Memoise
    args={[props.a, props.b]}
    compute={(a, b => a * b)}
    component={ConsumerComponent}
  />
);

Customization

You can pass in an areArgsEqual prop with the signature of (prevArgs: Args, nextArgs: Args) => boolean to customise the equality check which defaults to a shallow equal.