https://github.com/tdeekens/react-memoise
A component to declaratively memoise a computation within a React component.
https://github.com/tdeekens/react-memoise
javascript performance react web
Last synced: about 1 month ago
JSON representation
A component to declaratively memoise a computation within a React component.
- Host: GitHub
- URL: https://github.com/tdeekens/react-memoise
- Owner: tdeekens
- License: mit
- Created: 2018-02-19T10:38:37.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-02-19T14:15:51.000Z (over 8 years ago)
- Last Synced: 2026-03-22T22:26:15.361Z (3 months ago)
- Topics: javascript, performance, react, web
- Language: JavaScript
- Size: 104 KB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
📚 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 => (
a * b}
render={computedValue => {computedValue}}
/>
);
```
#### Using a component
```jsx
import Memoise from 'react-memoise';
const ConsumerComponent = props => {props.computedValue};
const ParentComponent = props => (
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.