react-memo-debounce
v1.2.2
Published
A function to prevent unnecessary render calls ( almost like React.memo )
Downloads
39
Readme
react-memo-debounce
Description:
A function to prevent unnecessary render calls.
Almost like React.memo
, but by default we will deeply compare values with debounce effect.
So we will avoid many unnecessary render calls.
It can be useful when each render operation is doing some expensive calculation.
How to install
npm install react-memo-debounce
Examples
Here we will wait 1000ms and compare props values by our isDeepEqual function
Import React from 'react'
import memoDebounce from 'react-memo-debounce'
function SimpleComponent(props) {
const { title, description } = props
return (
<div>
<h1>{title}</h1>
<p>{description}</p>
</div>
)
}
export default memoDebounce(SimpleComponent, { delay: 1_000 })
Here we will wait 500ms and compare props by own function
Import React from 'react'
import memoDebounce from 'react-memo-debounce'
function SimpleComponent(props) {
const { title, description } = props
return (
<div>
<h1>{title}</h1>
<p>{description}</p>
</div>
)
}
const isEqual = (prevProps, nextProps) => prevProps.title === nextProps.title
export default memoDebounce(SimpleComponent, { delay: 500, isEqualFunction: isEqual })