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 feature.

Installation

$3

``sh
npm i use-deep-compare
`

$3

`sh
yarn add use-deep-compare
`

$3

`sh
pnpm add use-deep-compare
`

$3

`sh
bun add use-deep-compare
`

Usage

$3

`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

;
}
`

$3

`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

;
}
`

$3

`js
import React from "react";
import { useDeepCompareLayoutEffect } from "use-deep-compare";

function App({ object, array }) {
useDeepCompareLayoutEffect(() => {
// perform layout effects
}, [object, array]);

return

;
}
`

$3

`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

;
}
`

$3

`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

;
}
`

$3

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.

[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/BluMintInc/use-deep-compare/blob/master/LICENSE