{"id":16585202,"url":"https://github.com/krisztiaan/memoarray","last_synced_at":"2026-01-25T00:02:31.793Z","repository":{"id":46529580,"uuid":"114004453","full_name":"Krisztiaan/memoarray","owner":"Krisztiaan","description":"A simple javascript utility for array binding memoization.","archived":false,"fork":false,"pushed_at":"2021-10-06T10:22:10.000Z","size":7,"stargazers_count":2,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-18T05:18:11.750Z","etag":null,"topics":["array","jsx","memoarray","memobind","memoize","react","react-native","styles"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Krisztiaan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-12-12T15:07:56.000Z","updated_at":"2021-10-06T10:22:14.000Z","dependencies_parsed_at":"2022-07-19T23:02:59.401Z","dependency_job_id":null,"html_url":"https://github.com/Krisztiaan/memoarray","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Krisztiaan%2Fmemoarray","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Krisztiaan%2Fmemoarray/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Krisztiaan%2Fmemoarray/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Krisztiaan%2Fmemoarray/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Krisztiaan","download_url":"https://codeload.github.com/Krisztiaan/memoarray/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242158051,"owners_count":20081185,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["array","jsx","memoarray","memobind","memoize","react","react-native","styles"],"created_at":"2024-10-11T22:47:12.423Z","updated_at":"2026-01-25T00:02:31.754Z","avatar_url":"https://github.com/Krisztiaan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"memoarray\r\n===========\r\n\r\n[![Version](http://img.shields.io/npm/v/memoarray.svg)](https://www.npmjs.org/package/memoarray)\r\n[![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE)\r\n\r\nA 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.\r\n\r\n\r\nInstall with `npm install memoarray` or `yarn add memoarray`\r\n\r\nUsage:\r\n\r\n```js\r\nvar memoarray = require('memoarray');\r\nmemoarray(context, item1, item2, item3);\r\n```\r\n\r\n**CAUTION: there are some possible issues around `undefined` values**\r\n\r\n```js\r\nmemoarray(this, undefined, undefined, null) === memoarray(this, undefined, null) // true\r\n```\r\n\r\nCheck out [this pen](https://codepen.io/Krisztiaan/pen/XVmbjW). If you have a solution, feel free to open a PR about it.\r\n\r\n### Motivation\r\nAn 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.\r\n\r\nA common use case of `arrays` in `render` is when rendering an element, and styling with overrides:\r\n```jsx\r\n\u003cul\u003e\r\n  {this.props.items.map(item =\u003e\r\n    \u003cli key={item.id} style={[styles.listItem, listItemStyleOverride]}\u003e\r\n      ...\r\n    \u003c/li\u003e\r\n  )}\r\n\u003c/ul\u003e\r\n```\r\nThis is not good because it creates new arrays in every update.\r\n\r\nTo resolve the problem, `memoarray` caches the array construction result so that it could be reused if the arguments are not changed. See below example:\r\n```jsx\r\n\u003cul\u003e\r\n  {this.props.items.map(item =\u003e\r\n    \u003cli key={item.id} onClick={memoarray(this, styles.listItem, listItemStyleOverride)}\u003e\r\n      ...\r\n    \u003c/li\u003e\r\n  )}\r\n\u003c/ul\u003e\r\n```\r\n\r\n### How it works\r\n`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.\r\n\r\n### License\r\n\r\n[MIT](LICENSE). Copyright (c) 2017 Krisztian Ferencz.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkrisztiaan%2Fmemoarray","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkrisztiaan%2Fmemoarray","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkrisztiaan%2Fmemoarray/lists"}