Adds memoization to stateless functional components in React. This HOF works best with components you consistently use (e.g. icons). It will not work efficiently with components that require props which mutate often (such as those with an onClick callback fn).
This uses a circular doubly linked list for its LRU caching strategy which makes it operationally efficient in turning up results.
By default, the equality check between props is a strict shallow equal function.
I would not recommend using large cache sizes as that largely defeats the optimization of skipping React.createElement. The default cache size is 16.
yarn add react-purity
or npm i react-purity
import pure from 'react-purity'
const Icon = pure(function Icon ({color, innerRef, title, ...props}) {
const pathStyle = {fill: color || '#000'}
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox='0 0 25 25'
style={props}
ref={innerRef}
>
<title>{title}</title>
<path
d="M.557,12.35578a1.89945,1.89945,0,1,1,2.68645-2.686l6.45255,6.453,12.06145-12.061A1.89929,1.89929,0,1,1,24.443,6.74823L9.6969,21.49477Z"
style={pathStyle}
/>
<path
d="M24.69186,4.30071a1.05135,1.05135,0,0,0-1.48724,0L9.47188,18.03345,1.79538,10.35694A1.05164,1.05164,0,0,0,.30814,11.84418l9.16324,9.16325.0005-.0005.0005.0005L24.69186,5.78795A1.05135,1.05135,0,0,0,24.69186,4.30071Z"
style={pathStyle}
/>
</svg>
)
})
const IconA = <Icon color='#c127d2' width={30} height={30}/>
const IconB = <Icon color='#c127d2' width={30} height={30}/>
const IconC = <Icon color='#c4c4c4' width={30} height={30}/>
console.log(IconA === IconB)
// true
console.log(IconA === IconC)
// false
size {number}
- The maximum number of property/element pairs to cache for a given component
- default:
16
isEqual {function}
- default:
shallowEqual
(https://github.com/jaredLunde/render-props/blob/master/packages/utils/src/strictShallowEqual.js)
- default:
debug {bool}
- When
true
this function will log cache hits/misses to the console along with the hit-rate - default:
false
- When