use-custom-compare
v1.5.0TypeScript
It's React's useEffect/useMemo/useCallback hooks, except using custom comparison on the inputs, not reference equality
12.4K/weekUpdated 10 months agoMITUnpacked: 51.5 KB
Published by Kotaro Sugawara
npm install use-custom-compareuse-custom-compare
It's React's useEffect/useMemo/useCallback hooks, except using custom comparison on the inputs, not reference equality
Installation
``
npm install use-custom-compare
or
yarn add use-custom-compare
`
Usage
$3
`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 /}
;}
`
$3
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 /};
}
`$3
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 /};
}
`$3
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
in 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.`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 first.
Inspiration
🐋 It's react's useEffect hook, except using deep comparison on the inputs, not reference equality.
- use-deep-compare It's react's useEffect/useMemo/useCallback hooks, except using deep comparison on the inputs.
- 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):
 Kotaro Sugawara 💻 📖 🤔 🚇 ⚠️ |
This project follows the all-contributors specification. Contributions of any kind welcome!