https://github.com/kotarella1110/use-custom-compare
It's React's useEffect/useMemo/useCallback hooks, except using custom comparison on the inputs, not reference equality
https://github.com/kotarella1110/use-custom-compare
hooks react react-hooks typescript
Last synced: about 1 year ago
JSON representation
It's React's useEffect/useMemo/useCallback hooks, except using custom comparison on the inputs, not reference equality
- Host: GitHub
- URL: https://github.com/kotarella1110/use-custom-compare
- Owner: kotarella1110
- License: mit
- Created: 2020-03-02T07:10:41.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2025-03-31T12:08:51.000Z (over 1 year ago)
- Last Synced: 2025-04-09T19:18:51.557Z (about 1 year ago)
- Topics: hooks, react, react-hooks, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/use-custom-compare
- Size: 3.83 MB
- Stars: 86
- Watchers: 3
- Forks: 4
- Open Issues: 29
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
use-custom-compare
It's React's useEffect/useMemo/useCallback hooks, except using custom comparison on the inputs, not reference equality
[](LICENSE)
[](https://github.com/kotarella1110/use-custom-compare/actions?query=workflow%3ACI)
[](https://www.npmjs.com/package/use-custom-compare)
[](https://www.npmjs.com/package/use-custom-compare)
[](https://www.npmjs.com/package/use-custom-compare)
[](https://david-dm.org/kotarella1110/use-custom-compare)
[](https://github.com/semantic-release/semantic-release)
[](http://commitizen.github.io/cz-cli/)
[](CONTRIBUTING.md)
[](#contributors-)
## Installation
```
npm install use-custom-compare
# or
yarn add use-custom-compare
```
## Usage
### useCustomCompareEffect
```js
import React from "react";
import { useCustomCompareEffect } from "use-custom-compare";
import isEqual from "lodash/isEqual";
function App({ options }) {
useCustomCompareEffect(
() => {
// do something significant here
return () => {
// return to clean up that significant thing
};
},
[options],
(prevDeps, nextDeps) => isEqual(prevDeps, nextDeps)
);
return
{/* render significant thing */};
}
```
### useCustomCompareLayoutEffect
```js
import React from "react";
import { useCustomCompareLayoutEffect } from "use-custom-compare";
import isEqual from "lodash/isEqual";
function App({ options }) {
useCustomCompareLayoutEffect(
() => {
// do something significant here
return () => {
// return to clean up that significant thing
};
},
[options],
(prevDeps, nextDeps) => isEqual(prevDeps, nextDeps)
);
return
{/* render significant thing */};
}
```
### useCustomCompareMemo
```js
import React from "react";
import { useCustomCompareMemo } from "use-custom-compare";
import isEqual from "lodash/isEqual";
function App({ options }) {
const memoized = useCustomCompareMemo(
() => {
// do something significant here
},
[options],
(prevDeps, nextDeps) => isEqual(prevDeps, nextDeps)
);
return
{/* render significant thing */};
}
```
### useCustomCompareCallback
```js
import React from "react";
import { useCustomCompareCallback } from "use-custom-compare";
import isEqual from "lodash/isEqual";
function App({ options }) {
const memoized = useCustomCompareCallback(
() => {
// do something significant here
},
[options],
(prevDeps, nextDeps) => isEqual(prevDeps, nextDeps)
);
return
{/* render significant thing */};
}
```
## TypeScript
This custom compare hooks is type-safe because it is built with TypeScript, which requires the use of TypeScript 4.0 or higher.
```tsx
import React from "react";
import { useCustomCompareEffect } from "use-custom-compare";
import isEqual from "lodash/isEqual";
function App() {
useCustomCompareEffect(
() => {},
[1, { a: "b" }, true],
(
prevDeps, // type: readonly [number, { a: string }, boolean]
nextDeps // type: readonly [number, { a: string }, boolean]
) => isEqual(prevDeps, nextDeps)
);
return
;
}
```
## ESLint
`exhaustive-deps` in [eslint-plugin-react-hooks](https://www.npmjs.com/package/eslint-plugin-react-hooks) can be configured to validate dependencies.
If you want to apply that rule to this custom compare hooks as well, use the [`additionalHooks` option](https://www.npmjs.com/package/eslint-plugin-react-hooks#advanced-configuration).
```js
{
"rules": {
// ...
"react-hooks/exhaustive-deps": [
"warn",
{
additionalHooks:
"(useCustomCompareEffect|useCustomCompareLayoutEffect|useCustomCompareMemo|useCustomCompareCallback)"
}
]
}
}
```
## Note
In the following cases, use React's useEffect/useMemo/useCallback hooks instead of this custom compare hooks!
- no dependencies
- dependencies are all primitive values
## Contributing
Contributions are always welcome! Please read the [contributing](./CONTRIBUTING.md) first.
## Inspiration
- [`use-deep-compare-effect`](https://github.com/kentcdodds/use-deep-compare-effect) 🐋 It's react's useEffect hook, except using deep comparison on the inputs, not reference equality.
- [`use-deep-compare`](https://github.com/sandiiarov/use-deep-compare) It's react's useEffect/useMemo/useCallback hooks, except using deep comparison on the inputs.
- [`use-custom-compare-effect`](https://github.com/sanjagh/use-custom-compare-effect) useEffect hook which takes a comparison function instead of compare using reference equality.
## Contributors
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
## License
[MIT](./LICENSE) © [Kotaro Sugawara](https://twitter.com/kotarella1110)
