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 🙏
Just yarn add react-memoise or npm i react-memoise.
import Memoise from 'react-memoise';
const ParentComponent = props => (
<Memoise args={[props.a, props.b]} compute={(a, b => a * b)}>
{computedValue => <code>{computedValue}</code>}
</Memoise>
);import Memoise from 'react-memoise';
const ParentComponent = props => (
<Memoise
args={[props.a, props.b]}
compute={(a, b => a * b)}
render={computedValue => <code>{computedValue}</code>}
/>
);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}
/>
);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.