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: about 1 month 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 (about 7 years ago)
• Default Branch: master
• Last Pushed: 2021-10-06T10:22:10.000Z (about 3 years ago)
• Last Synced: 2024-10-16T09:12:14.220Z (2 months 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

===========

[![Version](http://img.shields.io/npm/v/memoarray.svg)](https://www.npmjs.org/package/memoarray)

[![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](./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.