📚 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 🙏

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.