Skip to content

A component to declaratively memoise a computation within a React component.

License

Notifications You must be signed in to change notification settings

tdeekens/react-memoise

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Logo

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

CircleCI Status Codecov Coverage Status Made with Coffee

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.

About

A component to declaratively memoise a computation within a React component.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published