use-deep-compare - npm Package Compare versions

Comparing version 1.2.1 to 1.3.0

dist-node/index.js

@@ -29,2 +29,3 @@ 'use strict';
  *
+ * @see {@link https://react.dev/reference/react/useCallback}
  */
@@ -42,2 +43,3 @@
  *
+ * @see {@link https://react.dev/reference/react/useEffect}
  */
@@ -50,2 +52,40 @@
 /**
+ * `useDeepCompareImperativeHandle` customizes the instance value that is exposed to parent components when using `ref`.
+ * As always, imperative code using refs should be avoided in most cases.
+ *
+ * `useDeepCompareImperativeHandle` should be used with `React.forwardRef`.
+ *
+ * It's similar to `useImperativeHandle`, but uses deep comparison on the dependencies.
+ *
+ * Warning: `useDeepCompareImperativeHandle` should not be used with dependencies that
+ * are all primitive values. Use `React.useImperativeHandle` instead.
+ *
+ * @see {@link https://react.dev/reference/react/useImperativeHandle}
+ */
+
+function useDeepCompareImperativeHandle(ref, init, dependencies) {
+  React.useImperativeHandle(ref, init, useDeepCompareMemoize(dependencies));
+}
+
+/**
+ * The signature is identical to `useDeepCompareEffect`, but it fires synchronously after all DOM mutations.
+ * Use this to read layout from the DOM and synchronously re-render. Updates scheduled inside
+ * `useDeepCompareLayoutEffect` will be flushed synchronously, before the browser has a chance to paint.
+ *
+ * Prefer the standard `useDeepCompareEffect` when possible to avoid blocking visual updates.
+ *
+ * If you’re migrating code from a class component, `useDeepCompareLayoutEffect` fires in the same phase as
+ * `componentDidMount` and `componentDidUpdate`.
+ *
+ * Warning: `useDeepCompareLayoutEffect` should not be used with dependencies that
+ * are all primitive values. Use `React.useLayoutEffect` instead.
+ *
+ * @see {@link https://react.dev/reference/react/useLayoutEffect}
+ */
+
+function useDeepCompareLayoutEffect(effect, dependencies) {
+  React.useLayoutEffect(effect, useDeepCompareMemoize(dependencies));
+}
+
+/**
  * `useDeepCompareMemo` will only recompute the memoized value when one of the
@@ -57,2 +97,3 @@ * `dependencies` has changed.
  *
+ * @see {@link https://react.dev/reference/react/useMemo}
  */
@@ -66,3 +107,5 @@
 exports.useDeepCompareEffect = useDeepCompareEffect;
+exports.useDeepCompareImperativeHandle = useDeepCompareImperativeHandle;
+exports.useDeepCompareLayoutEffect = useDeepCompareLayoutEffect;
 exports.useDeepCompareMemo = useDeepCompareMemo;
 //# sourceMappingURL=index.js.map

dist-src/index.js

 export { useDeepCompareCallback } from "./useDeepCompareCallback.js";
 export { useDeepCompareEffect } from "./useDeepCompareEffect.js";
+export { useDeepCompareImperativeHandle } from "./useDeepCompareImperativeHandle.js";
+export { useDeepCompareLayoutEffect } from "./useDeepCompareLayoutEffect.js";
 export { useDeepCompareMemo } from "./useDeepCompareMemo.js";

dist-src/useDeepCompareCallback.js

@@ -10,2 +10,3 @@ import React from 'react';
  *
+ * @see {@link https://react.dev/reference/react/useCallback}
  */
@@ -12,0 +13,0 @@

dist-src/useDeepCompareEffect.js

@@ -9,2 +9,3 @@ import React from 'react';
  *
+ * @see {@link https://react.dev/reference/react/useEffect}
  */
@@ -11,0 +12,0 @@

dist-src/useDeepCompareMemo.js

@@ -10,2 +10,3 @@ import React from 'react';
  *
+ * @see {@link https://react.dev/reference/react/useMemo}
  */
@@ -12,0 +13,0 @@

dist-types/index.d.ts

 export { useDeepCompareCallback } from './useDeepCompareCallback';
 export { useDeepCompareEffect } from './useDeepCompareEffect';
+export { useDeepCompareImperativeHandle } from './useDeepCompareImperativeHandle';
+export { useDeepCompareLayoutEffect } from './useDeepCompareLayoutEffect';
 export { useDeepCompareMemo } from './useDeepCompareMemo';

dist-types/useDeepCompareCallback.d.ts

@@ -9,3 +9,4 @@ import React from 'react';
  *
+ * @see {@link https://react.dev/reference/react/useCallback}
  */
 export declare function useDeepCompareCallback<T extends Function>(callback: T, dependencies: React.DependencyList): T;

dist-types/useDeepCompareEffect.d.ts

@@ -8,3 +8,4 @@ import React from 'react';
  *
+ * @see {@link https://react.dev/reference/react/useEffect}
  */
 export declare function useDeepCompareEffect(effect: React.EffectCallback, dependencies: React.DependencyList): void;

dist-types/useDeepCompareMemo.d.ts

@@ -9,3 +9,4 @@ import React from 'react';
  *
+ * @see {@link https://react.dev/reference/react/useMemo}
  */
 export declare function useDeepCompareMemo<T>(factory: () => T, dependencies: React.DependencyList): T;

dist-web/index.js

@@ -23,2 +23,3 @@ import React from 'react';
  *
+ * @see {@link https://react.dev/reference/react/useCallback}
  */
@@ -36,2 +37,3 @@
  *
+ * @see {@link https://react.dev/reference/react/useEffect}
  */
@@ -44,2 +46,40 @@
 /**
+ * `useDeepCompareImperativeHandle` customizes the instance value that is exposed to parent components when using `ref`.
+ * As always, imperative code using refs should be avoided in most cases.
+ *
+ * `useDeepCompareImperativeHandle` should be used with `React.forwardRef`.
+ *
+ * It's similar to `useImperativeHandle`, but uses deep comparison on the dependencies.
+ *
+ * Warning: `useDeepCompareImperativeHandle` should not be used with dependencies that
+ * are all primitive values. Use `React.useImperativeHandle` instead.
+ *
+ * @see {@link https://react.dev/reference/react/useImperativeHandle}
+ */
+
+function useDeepCompareImperativeHandle(ref, init, dependencies) {
+  React.useImperativeHandle(ref, init, useDeepCompareMemoize(dependencies));
+}
+
+/**
+ * The signature is identical to `useDeepCompareEffect`, but it fires synchronously after all DOM mutations.
+ * Use this to read layout from the DOM and synchronously re-render. Updates scheduled inside
+ * `useDeepCompareLayoutEffect` will be flushed synchronously, before the browser has a chance to paint.
+ *
+ * Prefer the standard `useDeepCompareEffect` when possible to avoid blocking visual updates.
+ *
+ * If you’re migrating code from a class component, `useDeepCompareLayoutEffect` fires in the same phase as
+ * `componentDidMount` and `componentDidUpdate`.
+ *
+ * Warning: `useDeepCompareLayoutEffect` should not be used with dependencies that
+ * are all primitive values. Use `React.useLayoutEffect` instead.
+ *
+ * @see {@link https://react.dev/reference/react/useLayoutEffect}
+ */
+
+function useDeepCompareLayoutEffect(effect, dependencies) {
+  React.useLayoutEffect(effect, useDeepCompareMemoize(dependencies));
+}
+
+/**
  * `useDeepCompareMemo` will only recompute the memoized value when one of the
@@ -51,2 +91,3 @@ * `dependencies` has changed.
  *
+ * @see {@link https://react.dev/reference/react/useMemo}
  */
@@ -58,3 +99,3 @@
 
-export { useDeepCompareCallback, useDeepCompareEffect, useDeepCompareMemo };
+export { useDeepCompareCallback, useDeepCompareEffect, useDeepCompareImperativeHandle, useDeepCompareLayoutEffect, useDeepCompareMemo };
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "use-deep-compare",
   "description": "React hooks, except using deep comparison on the inputs, not reference equality",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "license": "MIT",
   "files": [
-    "dist-node/",
-    "dist-src/",
-    "dist-types/",
-    "dist-web/",
+    "dist-*/",
     "bin/"
@@ -26,4 +23,4 @@ ],
   "devDependencies": {
-    "@babel/preset-react": "7.23.3",
-    "@babel/preset-typescript": "7.23.3",
+    "@babel/preset-react": "7.24.7",
+    "@babel/preset-typescript": "7.24.7",
     "@pika/pack": "0.5.0",
@@ -34,5 +31,5 @@ "@pika/plugin-build-node": "0.9.2",
     "@pika/plugin-standard-pkg": "0.9.2",
-    "@types/react": "18.2.45",
-    "react": "18.2.0",
-    "typescript": "5.3.3"
+    "@types/react": "18.3.3",
+    "react": "18.3.1",
+    "typescript": "5.5.3"
   },
@@ -39,0 +36,0 @@ "esnext": "dist-src/index.js",

README.md

 # Use Deep Compare
 
-![npm](https://img.shields.io/npm/dt/use-deep-compare.svg)
-![npm](https://img.shields.io/npm/v/use-deep-compare.svg)
-![NpmLicense](https://img.shields.io/npm/l/use-deep-compare.svg)
+<!-- prettier-ignore-start -->
+[![version][version-badge]][package]
+[![downloads][downloads-badge]][npmtrends]
+[![MIT License][license-badge]][license]
+<!-- prettier-ignore-end -->
 
@@ -12,4 +14,2 @@ **Use Deep Compare** - React hooks, except using deep comparison on the inputs, not reference equality.
 
-> Note: React 16.8+ is required for Hooks.
-
 ### With npm
@@ -27,2 +27,14 @@
 
+### Or with pnpm
+
+```sh
+pnpm add use-deep-compare
+```
+
+### Or with bun
+
+```sh
+bun add use-deep-compare
+```
+
 ## Usage
@@ -63,2 +75,17 @@
 
+### useDeepCompareLayoutEffect
+
+```js
+import React from "react";
+import { useDeepCompareLayoutEffect } from "use-deep-compare";
+
+function App({ object, array }) {
+  useDeepCompareLayoutEffect(() => {
+    // perform layout effects
+  }, [object, array]);
+
+  return <div>{/* render component */}</div>;
+}
+```
+
 ### useDeepCompareMemo
@@ -79,5 +106,21 @@
 
+### 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 <div ref={ref}>{/* render component */}</div>;
+}
+```
+
 ### 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:
+To receive eslint warnings about missing array dependencies, just like for standard `useEffect`, `useCallback`, `useMemo`, ... hooks - extend you eslint config as follows:
 
@@ -89,3 +132,3 @@ ```json
     "react-hooks/exhaustive-deps": ["warn", {
-      "additionalHooks": "(useDeepCompareEffect|useDeepCompareCallback|useDeepCompareMemo)"
+      "additionalHooks": "(useDeepCompareEffect|useDeepCompareCallback|useDeepCompareMemo|useDeepCompareImperativeHandle|useDeepCompareLayoutEffect)"
     }]
@@ -96,6 +139,14 @@ }
 
-
-
 ## Credits
 
 - Inspired by [use-deep-compare-effect](https://github.com/kentcdodds/use-deep-compare-effect).
+
+<!-- prettier-ignore-start -->
+[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
+<!-- prettier-ignore-end -->

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

32274

increased by82.74%

Number of package files

21

increased by23.53%

Lines of code

330

increased by87.5%

Number of lines in readme file

147

increased by53.13%

No dependency changes