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: 2 months 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-01-15T14:41:43.000Z (6 months ago)
• Last Synced: 2024-01-22T05:53:50.410Z (5 months ago)
• Language: TypeScript
• Homepage:
• Size: 613 KB
• Stars: 202
• Watchers: 2
• Forks: 6
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-react-hooks - `use-deep-compare`
• awesome-react-hooks-cn - `use-deep-compare`
• awesome-react-hooks - `use-deep-compare`
• fucking-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

> Note: React 16.8+ is required for Hooks.

### With npm

```sh

npm i use-deep-compare

```

### Or with yarn

```sh

yarn 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 */}
;

}

```


### 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 */}
;

}

```


### 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)"

    }]

  }

}

```

## 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