https://github.com/krisztiaan/memoarray
A simple javascript utility for array binding memoization.
https://github.com/krisztiaan/memoarray
array jsx memoarray memobind memoize react react-native styles
Last synced: 5 months ago
JSON representation
A simple javascript utility for array binding memoization.
- Host: GitHub
- URL: https://github.com/krisztiaan/memoarray
- Owner: Krisztiaan
- License: mit
- Created: 2017-12-12T15:07:56.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2021-10-06T10:22:10.000Z (over 4 years ago)
- Last Synced: 2025-02-18T05:18:11.750Z (over 1 year ago)
- Topics: array, jsx, memoarray, memobind, memoize, react, react-native, styles
- Language: JavaScript
- Homepage:
- Size: 6.84 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
memoarray
===========
[](https://www.npmjs.org/package/memoarray)
[](./LICENSE)
A simple javascript utility for array binding memoization. It's motivated by and based on [memobind](https://github.io/supnate/memobind), and the want to reduce unneccesary re-render due to prop change in styles when array prop is supplied.
Install with `npm install memoarray` or `yarn add memoarray`
Usage:
```js
var memoarray = require('memoarray');
memoarray(context, item1, item2, item3);
```
**CAUTION: there are some possible issues around `undefined` values**
```js
memoarray(this, undefined, undefined, null) === memoarray(this, undefined, null) // true
```
Check out [this pen](https://codepen.io/Krisztiaan/pen/XVmbjW). If you have a solution, feel free to open a PR about it.
### Motivation
An inline array initializer `[element1, element2]` in a JSX prop will create a brand new array on every single render. This is bad for performance, as it will result in the garbage collector being invoked way more than is necessary.
A common use case of `arrays` in `render` is when rendering an element, and styling with overrides:
```jsx
-
...
{this.props.items.map(item =>
)}
```
This is not good because it creates new arrays in every update.
To resolve the problem, `memoarray` caches the array construction result so that it could be reused if the arguments are not changed. See below example:
```jsx
-
...
{this.props.items.map(item =>
)}
```
### How it works
`memoarray` caches the array construction result in the `context` object. The array creation result is stored with the key generated from arguments using JSON.stringify.
### License
[MIT](LICENSE). Copyright (c) 2017 Krisztian Ferencz.