Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sandiiarov/use-deep-compare
🤿 React hooks, except using deep comparison on the inputs, not reference equality
https://github.com/sandiiarov/use-deep-compare
Last synced: about 1 month ago
JSON representation
🤿 React hooks, except using deep comparison on the inputs, not reference equality
- Host: GitHub
- URL: https://github.com/sandiiarov/use-deep-compare
- Owner: sandiiarov
- License: mit
- Created: 2019-03-30T16:41:00.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-07-21T00:40:05.000Z (5 months ago)
- Last Synced: 2024-10-18T06:15:10.869Z (about 2 months ago)
- Language: TypeScript
- Homepage:
- Size: 723 KB
- Stars: 231
- Watchers: 2
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-react-hooks - `use-deep-compare`
- awesome-react-hooks-cn - `use-deep-compare`
- awesome-react-hooks - `use-deep-compare`
- awesome-react-hooks - `use-deep-compare`
README
# Use Deep Compare
[![version][version-badge]][package]
[![downloads][downloads-badge]][npmtrends]
[![MIT License][license-badge]][license]
**Use Deep Compare** - React hooks, except using deep comparison on the inputs, not reference equality.
Read about [Hooks](https://reactjs.org/docs/hooks-intro.html) feature.
## Installation
### With npm
```sh
npm i use-deep-compare
```
### Or with yarn
```sh
yarn add use-deep-compare
```
### Or with pnpm
```sh
pnpm add use-deep-compare
```
### Or with bun
```sh
bun add use-deep-compare
```
## Usage
### useDeepCompareEffect
```js
import React from "react";
import { useDeepCompareEffect } from "use-deep-compare";
function App({ object, array }) {
useDeepCompareEffect(() => {
// do something significant here
return () => {
// return to clean up that significant thing
};
}, [object, array]);
return
{/* render significant thing */};
}
```
### useDeepCompareCallback
```js
import React from "react";
import { useDeepCompareCallback } from "use-deep-compare";
function App({ object, array }) {
const callback = useDeepCompareCallback(() => {
// do something significant here
}, [object, array]);
return
{/* render significant thing */};
}
```
### useDeepCompareLayoutEffect
```js
import React from "react";
import { useDeepCompareLayoutEffect } from "use-deep-compare";
function App({ object, array }) {
useDeepCompareLayoutEffect(() => {
// perform layout effects
}, [object, array]);
return
{/* render component */};
}
```
### useDeepCompareMemo
```js
import React from "react";
import { useDeepCompareMemo } from "use-deep-compare";
function App({ object, array }) {
const memoized = useDeepCompareMemo(() => {
// do something significant here
}, [object, array]);
return
{/* render significant thing */};
}
```
### useDeepCompareImperativeHandle
```js
import React from "react";
import { useDeepCompareImperativeHandle } from "use-deep-compare";
function App({ object, array }) {
const ref = React.useRef();
useDeepCompareImperativeHandle(ref, () => ({
// create imperative methods
}), [object, array]);
return
{/* render component */};
}
```
### react-hooks/exhaustive-deps eslint warnings
To receive eslint warnings about missing array dependencies, just like for standard `useEffect`, `useCallback`, `useMemo`, ... hooks - extend you eslint config as follows:
```json
{
"rules": {
// ...
"react-hooks/exhaustive-deps": ["warn", {
"additionalHooks": "(useDeepCompareEffect|useDeepCompareCallback|useDeepCompareMemo|useDeepCompareImperativeHandle|useDeepCompareLayoutEffect)"
}]
}
}
```
## Credits
- Inspired by [use-deep-compare-effect](https://github.com/kentcdodds/use-deep-compare-effect).
[npm]: https://www.npmjs.com
[version-badge]: https://img.shields.io/npm/v/use-deep-compare.svg
[package]: https://www.npmjs.com/package/use-deep-compare
[downloads-badge]: https://img.shields.io/npm/dt/use-deep-compare.svg
[npmtrends]: http://www.npmtrends.com/use-deep-compare
[license-badge]: https://img.shields.io/npm/l/use-deep-compare.svg
[license]: https://github.com/sandiiarov/use-deep-compare/blob/master/LICENSE