https://github.com/joonhocho/memprop

React optimization tool for memoizing (function / object) property to avoid unnecessary re-renders
https://github.com/joonhocho/memprop

Last synced: about 1 month ago
JSON representation

React optimization tool for memoizing (function / object) property to avoid unnecessary re-renders

• Host: GitHub
• URL: https://github.com/joonhocho/memprop
• Owner: joonhocho
• License: mit
• Created: 2019-07-01T19:01:04.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T04:21:48.000Z (almost 2 years ago)
• Last Synced: 2024-09-16T16:10:09.773Z (3 months ago)
• Language: TypeScript
• Size: 932 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# memprop

React optimization tool for memoizing (function / object) property to avoid unnecessary re-renders

![npm type definitions](https://img.shields.io/npm/types/memprop.svg)

[![Coverage Status](https://coveralls.io/repos/github/joonhocho/memprop/badge.svg?branch=master)](https://coveralls.io/github/joonhocho/memprop?branch=master)

[![Build Status](https://travis-ci.org/joonhocho/memprop.svg?branch=master)](https://travis-ci.org/joonhocho/memprop)

[![npm version](https://badge.fury.io/js/memprop.svg)](https://badge.fury.io/js/memprop)

[![Dependency Status](https://david-dm.org/joonhocho/memprop.svg)](https://david-dm.org/joonhocho/memprop)

[![GitHub](https://img.shields.io/github/license/joonhocho/memprop.svg)](https://github.com/joonhocho/memprop/blob/master/LICENSE)

## Get Started

```

npm install --save memprop

```

or

```

yarn add memprop

```

## Why

Since everyone starts passing render functions as a `prop` to child component, `PureComponent` is becoming useless. New function instance is re-created in every render, so `PureComponent` cannot prevent unnecessary rerendering.

`memprop` is here to help.

## How it works

`memprop()` creates a new memoize function of type `(propToReuse: T, valuesToWatch?: any) => T`.

if `valuesToWatch` is not provided,

previously stored `propToReuse` will be reused.

if `valuesToWatch` is shallow equal to previous `valuesToWatch`,

previously stored `propToReuse` will be reused.

if `propToReuse` is shallow equal to previous `propToReuse`,

previously stored `propToReuse` will be reused.

otherwise, new `propToReuse` will be stored and return.

## How to Use

```typescript

import { memprop } from 'memprop';

class extends PureComponent {

  // initialize memprop for each prop to memoize

  public memoRender = memprop();

  public memoOptions = memprop();

  public render() {

    return (

      

        {this.memoRender(

          (selectRenderProps) => {

            // render

          },

          // new function prop will be passed only if any of theses values change

          [watch, these, values] // or {watch, these, values} is also supported

        )}

      

    );

  }

}

```

## License

[MIT License](https://github.com/joonhocho/memprop/blob/master/LICENSE)