A high quality and reliable React Hooks library.
use-compare - React Hooks, except using deep comparison on the inputs, not reference equality. You can customize the comparison function.
npm
npm i use-compare
yarn
yarn add use-compare
pnpm
pnpm add use-compare
useDeepCompareEffect
import { useDeepCompareEffect } from 'use-compare'
const Button = ({ object, array }) => {
useDeepCompareEffect(() => {
// do something
}, [object, array])
return <button>click</button>
}
// Or, You can customize the comparison function.
const isEqual = (prevValue, value) => {
// do your comparison about prevValue and value to return true or false
return boolean
}
const Button = ({ object, array }) => {
useDeepCompareEffect(
() => {
// do something
},
[object, array],
isEqual
)
return <button>click</button>
}
useDeepCompareCallback
import { useDeepCompareCallback } from 'use-compare'
const Button = ({ object, array }) => {
useDeepCompareCallback(() => {
// do something
}, [object, array])
return <button>click</button>
}
// Or, You can customize the comparison function.
const isEqual = (prevValue, value) => {
// do your comparison about prevValue and value to return true or false
return boolean
}
const Button = ({ object, array }) => {
useDeepCompareCallback(
() => {
// do something
},
[object, array],
isEqual
)
return <button>click</button>
}
useDeepCompareMemo
import { useDeepCompareMemo } from 'use-compare'
const Button = ({ object, array }) => {
useDeepCompareMemo(() => {
// do something
}, [object, array])
return <button>click</button>
}
// Or, You can customize the comparison function.
const isEqual = (prevValue, value) => {
// do your comparison about prevValue and value to return true or false
return boolean
}
const Button = ({ object, array }) => {
useDeepCompareMemo(
() => {
// do something
},
[object, array],
isEqual
)
return <button>click</button>
}