A bunch sets of React Hooks which performs a shallow equality comparison on each dependencies array values to determine if they should update.
The shallow equality comparison checks return true when the following situations:
- The
Object.is(A,B)
return true - Both value A and B are object with same keys,for each key,
Object.is(A[key],B[key])
return true
The list of hooks are avaliable:
- useShallowEffect
- useShallowLayoutEffect
- useShallowMemo
- useShallowCallback
- useShallowImperativeHandle
npm install react-shallow-hooks
# use yarn
yarn add react-shallow-hooks
import { useShallowEffect, useShallowCallback } 'react-shallow-hooks'
const useSomething=()=>{
const deps={
a:123,
b:123
}
//The effect callback only call once ,and won't call on every re-render;
useShallowEffect(()=>{
console.log('update')
},[deps])
const shallowCallback=useShallowEffect(()=>console.log('callback'),[deps])
}