react-memoise

📚 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

``jsx
import Memoise from 'react-memoise';

const ParentComponent = props => (
a * b)}>
{computedValue => {computedValue}}

);
`

#### Using a render-prop

`jsx
import Memoise from 'react-memoise';

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

#### Using a component

`jsx
import Memoise from 'react-memoise';

const ConsumerComponent = props => {props.computedValue};

const ParentComponent = props => (
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.