React optimization tool for memoizing (function / object) property to avoid unnecessary re-renders
npm install --save memprop
or
yarn add memprop
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.
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.
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>
);
}
}