memprop

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

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 <T>(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

import { memprop } from 'memprop';

class extends PureComponent {
  // initialize memprop for each prop to memoize
  public memoRender = memprop();

  public memoOptions = memprop();

  public render() {
    return (
      <Select
        options={this.memoOptions(
          [{ value: '1' }, { value: '2' }]
          // no watch args means it will always reuse the first given options
        )}
      >
        {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
        )}
      </Select>
    );
  }
}

License

MIT License