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