Deep, custom and deterministic comparison for useEffect, useLayoutEffect, useMemo and useCallback React hooks.
npm install use-compares> Deep, custom and deterministic comparison for useEffect, useLayoutEffect, useMemo and useCallback React hooks.
- use-compares
- Table of Contents
- About
- Install
- Usage
- Contribute
- License
useEffect, useLayoutEffect, useMemo and useCallback hooks with the addition of a custom, deep or deterministic comparison of dependencies in contrast of reference equality.
This is useful for you when you want to ensure a hook only runs under specific comparison conditions. A good mental to have is to see it as if you are conditionally comparing the previous props with the current:
```
useEffect(() => {
if (prev !== current) {
// Do it
}
}, [current])
This project uses node and npm.
`sh`
$ npm install use-compares
$ # OR
$ yarn add use-compares
`js
import {
// Allows a custom comparison function to be provided
useCustomCompareMemo,
useCustomCompareCallback,
useCustomCompareEffect,
useCustomCompareLayoutEffect,
// Performs a deep comparison using the dequal/lite package
useDeepCompareMemo,
useDeepCompareCallback,
useDeepCompareEffect,
useDeepCompareLayoutEffect,
// Performs a consistent hash comparison using the json-stringify-deterministic package
useDeterministicCompareMemo,
useDeterministicCompareCallback,
useDeterministicCompareEffect,
useDeterministicCompareLayoutEffect
} from "use-compares"
`
The custom compare hooks except an additional third argument which compares the current props with the previous props:
`js
import { useCustomCompareEffect } from "use-compares/custom"
import { dequal as isEqual } from "dequal/lite"
const Component = () => {
useCustomCompareEffect(() => {
console.log('Deep effect')
}, [{foo: true}], isEqual)
return null
}
`
The deep and deterministic compare varations can be seen as varations of the custom compare hook with the comparison function already provided using an external libary:dequal
- - For deep comparsion.json-stringify-deterministic
- - For consistent hashed key comparison.
1. Fork it and create your feature branch: git checkout -b my-new-feature.git commit -am "Add some feature"
2. Commit your changes: .git push origin my-new-feature`.
3. Push to the branch:
4. Submit a pull request.
MIT © Tiaan du Plessis