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.