@react-hookz/web - npm Package Compare versions

Comparing version 12.1.2 to 12.2.0

CHANGELOG.md

@@ -0,1 +1,8 @@
+# [12.2.0](https://github.com/react-hookz/web/compare/v12.1.2...v12.2.0) (2022-01-14)
+
+
+### Features
+
+* new hook `useDeepCompareEffect` ([#581](https://github.com/react-hookz/web/issues/581)) ([3dfa7b5](https://github.com/react-hookz/web/commit/3dfa7b5664746fd5288d488fb477c23f8e765f43))
+
 ## [12.1.2](https://github.com/react-hookz/web/compare/v12.1.1...v12.1.2) (2022-01-13)
@@ -2,0 +9,0 @@

cjs/index.d.ts

@@ -7,2 +7,3 @@ export { useDebouncedCallback } from './useDebouncedCallback/useDebouncedCallback';
 export { useDebouncedEffect } from './useDebouncedEffect/useDebouncedEffect';
+export { useDeepCompareEffect } from './useDeepCompareEffect/useDeepCompareEffect';
 export { useFirstMountState } from './useFirstMountState/useFirstMountState';
@@ -9,0 +10,0 @@ export { useIsMounted } from './useIsMounted/useIsMounted';

cjs/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.truthyOrArrayPredicate = exports.truthyAndArrayPredicate = exports.useEventListener = exports.useDocumentTitle = exports.useClickOutside = exports.useKeyboardEvent = exports.useMediaQuery = exports.useMeasure = exports.useResizeObserver = exports.useIntersectionObserver = exports.useAsyncAbortable = exports.useAsync = exports.useSessionStorageValue = exports.useLocalStorageValue = exports.useSyncedRef = exports.usePermission = exports.useNetworkState = exports.useValidator = exports.useThrottledState = exports.useToggle = exports.useSet = exports.useSafeState = exports.usePrevious = exports.useMediatedState = exports.useMap = exports.useDebouncedState = exports.useUpdateEffect = exports.useUnmountEffect = exports.useThrottledEffect = exports.useRerender = exports.useMountEffect = exports.useIsomorphicLayoutEffect = exports.useIsMounted = exports.useFirstMountState = exports.useDebouncedEffect = exports.useCustomCompareEffect = exports.useConditionalEffect = exports.useThrottledCallback = exports.useRafCallback = exports.useDebouncedCallback = void 0;
+exports.truthyOrArrayPredicate = exports.truthyAndArrayPredicate = exports.useEventListener = exports.useDocumentTitle = exports.useClickOutside = exports.useKeyboardEvent = exports.useMediaQuery = exports.useMeasure = exports.useResizeObserver = exports.useIntersectionObserver = exports.useAsyncAbortable = exports.useAsync = exports.useSessionStorageValue = exports.useLocalStorageValue = exports.useSyncedRef = exports.usePermission = exports.useNetworkState = exports.useValidator = exports.useThrottledState = exports.useToggle = exports.useSet = exports.useSafeState = exports.usePrevious = exports.useMediatedState = exports.useMap = exports.useDebouncedState = exports.useUpdateEffect = exports.useUnmountEffect = exports.useThrottledEffect = exports.useRerender = exports.useMountEffect = exports.useIsomorphicLayoutEffect = exports.useIsMounted = exports.useFirstMountState = exports.useDeepCompareEffect = exports.useDebouncedEffect = exports.useCustomCompareEffect = exports.useConditionalEffect = exports.useThrottledCallback = exports.useRafCallback = exports.useDebouncedCallback = void 0;
 /* eslint-disable import/no-cycle */
@@ -19,2 +19,4 @@ // Callback
 Object.defineProperty(exports, "useDebouncedEffect", { enumerable: true, get: function () { return useDebouncedEffect_1.useDebouncedEffect; } });
+var useDeepCompareEffect_1 = require("./useDeepCompareEffect/useDeepCompareEffect");
+Object.defineProperty(exports, "useDeepCompareEffect", { enumerable: true, get: function () { return useDeepCompareEffect_1.useDeepCompareEffect; } });
 var useFirstMountState_1 = require("./useFirstMountState/useFirstMountState");
@@ -21,0 +23,0 @@ Object.defineProperty(exports, "useFirstMountState", { enumerable: true, get: function () { return useFirstMountState_1.useFirstMountState; } });

cjs/useConditionalEffect/useConditionalEffect.d.ts

@@ -10,3 +10,3 @@ import { DependencyList } from 'react';
  * @param deps Dependencies list like for `useEffect`. If not undefined - effect will be
- * triggered when deps changed AND conditions are satisfying predicate.
+ * triggered when deps change AND conditions satisfy predicate.
  * @param conditions Conditions array.
@@ -13,0 +13,0 @@ * @param predicate Predicate that defines whether conditions satisfying certain

cjs/useConditionalEffect/useConditionalEffect.js

@@ -21,3 +21,3 @@ "use strict";
  * @param deps Dependencies list like for `useEffect`. If not undefined - effect will be
- * triggered when deps changed AND conditions are satisfying predicate.
+ * triggered when deps change AND conditions satisfy predicate.
  * @param conditions Conditions array.
@@ -24,0 +24,0 @@ * @param predicate Predicate that defines whether conditions satisfying certain

cjs/useCustomCompareEffect/useCustomCompareEffect.d.ts

@@ -6,3 +6,3 @@ import { DependencyList } from 'react';
 /**
- * Like `useEffect` but uses provided comparator function to validate dependencies change.
+ * Like `useEffect` but uses provided comparator function to validate dependency changes.
  *
@@ -9,0 +9,0 @@ * @param callback Function that will be passed to underlying effect hook.

cjs/useCustomCompareEffect/useCustomCompareEffect.js

@@ -19,3 +19,3 @@ "use strict";
 /**
- * Like `useEffect` but uses provided comparator function to validate dependencies change.
+ * Like `useEffect` but uses provided comparator function to validate dependency changes.
  *
@@ -22,0 +22,0 @@ * @param callback Function that will be passed to underlying effect hook.

esm/index.d.ts

@@ -7,2 +7,3 @@ export { useDebouncedCallback } from './useDebouncedCallback/useDebouncedCallback';
 export { useDebouncedEffect } from './useDebouncedEffect/useDebouncedEffect';
+export { useDeepCompareEffect } from './useDeepCompareEffect/useDeepCompareEffect';
 export { useFirstMountState } from './useFirstMountState/useFirstMountState';
@@ -9,0 +10,0 @@ export { useIsMounted } from './useIsMounted/useIsMounted';

esm/index.js

@@ -10,2 +10,3 @@ /* eslint-disable import/no-cycle */
 export { useDebouncedEffect } from "./useDebouncedEffect/useDebouncedEffect.js";
+export { useDeepCompareEffect } from "./useDeepCompareEffect/useDeepCompareEffect.js";
 export { useFirstMountState } from "./useFirstMountState/useFirstMountState.js";
@@ -12,0 +13,0 @@ export { useIsMounted } from "./useIsMounted/useIsMounted.js";

esm/useConditionalEffect/useConditionalEffect.d.ts

@@ -10,3 +10,3 @@ import { DependencyList } from 'react';
  * @param deps Dependencies list like for `useEffect`. If not undefined - effect will be
- * triggered when deps changed AND conditions are satisfying predicate.
+ * triggered when deps change AND conditions satisfy predicate.
  * @param conditions Conditions array.
@@ -13,0 +13,0 @@ * @param predicate Predicate that defines whether conditions satisfying certain

esm/useConditionalEffect/useConditionalEffect.js

@@ -18,3 +18,3 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
  * @param deps Dependencies list like for `useEffect`. If not undefined - effect will be
- * triggered when deps changed AND conditions are satisfying predicate.
+ * triggered when deps change AND conditions satisfy predicate.
  * @param conditions Conditions array.
@@ -21,0 +21,0 @@ * @param predicate Predicate that defines whether conditions satisfying certain

esm/useCustomCompareEffect/useCustomCompareEffect.d.ts

@@ -6,3 +6,3 @@ import { DependencyList } from 'react';
 /**
- * Like `useEffect` but uses provided comparator function to validate dependencies change.
+ * Like `useEffect` but uses provided comparator function to validate dependency changes.
  *
@@ -9,0 +9,0 @@ * @param callback Function that will be passed to underlying effect hook.

esm/useCustomCompareEffect/useCustomCompareEffect.js

@@ -16,3 +16,3 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 /**
- * Like `useEffect` but uses provided comparator function to validate dependencies change.
+ * Like `useEffect` but uses provided comparator function to validate dependency changes.
  *
@@ -19,0 +19,0 @@ * @param callback Function that will be passed to underlying effect hook.

esnext/index.d.ts

@@ -7,2 +7,3 @@ export { useDebouncedCallback } from './useDebouncedCallback/useDebouncedCallback';
 export { useDebouncedEffect } from './useDebouncedEffect/useDebouncedEffect';
+export { useDeepCompareEffect } from './useDeepCompareEffect/useDeepCompareEffect';
 export { useFirstMountState } from './useFirstMountState/useFirstMountState';
@@ -9,0 +10,0 @@ export { useIsMounted } from './useIsMounted/useIsMounted';

esnext/index.js

@@ -10,2 +10,3 @@ /* eslint-disable import/no-cycle */
 export { useDebouncedEffect } from "./useDebouncedEffect/useDebouncedEffect.js";
+export { useDeepCompareEffect } from "./useDeepCompareEffect/useDeepCompareEffect.js";
 export { useFirstMountState } from "./useFirstMountState/useFirstMountState.js";
@@ -12,0 +13,0 @@ export { useIsMounted } from "./useIsMounted/useIsMounted.js";

esnext/useConditionalEffect/useConditionalEffect.d.ts

@@ -10,3 +10,3 @@ import { DependencyList } from 'react';
  * @param deps Dependencies list like for `useEffect`. If not undefined - effect will be
- * triggered when deps changed AND conditions are satisfying predicate.
+ * triggered when deps change AND conditions satisfy predicate.
  * @param conditions Conditions array.
@@ -13,0 +13,0 @@ * @param predicate Predicate that defines whether conditions satisfying certain

esnext/useConditionalEffect/useConditionalEffect.js

@@ -9,3 +9,3 @@ /* eslint-disable @typescript-eslint/no-explicit-any */
  * @param deps Dependencies list like for `useEffect`. If not undefined - effect will be
- * triggered when deps changed AND conditions are satisfying predicate.
+ * triggered when deps change AND conditions satisfy predicate.
  * @param conditions Conditions array.
@@ -12,0 +12,0 @@ * @param predicate Predicate that defines whether conditions satisfying certain

esnext/useCustomCompareEffect/useCustomCompareEffect.d.ts

@@ -6,3 +6,3 @@ import { DependencyList } from 'react';
 /**
- * Like `useEffect` but uses provided comparator function to validate dependencies change.
+ * Like `useEffect` but uses provided comparator function to validate dependency changes.
  *
@@ -9,0 +9,0 @@ * @param callback Function that will be passed to underlying effect hook.

esnext/useCustomCompareEffect/useCustomCompareEffect.js

@@ -7,3 +7,3 @@ /* eslint-disable @typescript-eslint/no-explicit-any */
 /**
- * Like `useEffect` but uses provided comparator function to validate dependencies change.
+ * Like `useEffect` but uses provided comparator function to validate dependency changes.
  *
@@ -10,0 +10,0 @@ * @param callback Function that will be passed to underlying effect hook.

package.json

 {
   "name": "@react-hookz/web",
-  "version": "12.1.2",
+  "version": "12.2.0",
   "description": "React hooks done right, for browser and SSR.",
@@ -68,3 +68,5 @@ "keywords": [
   },
-  "dependencies": {},
+  "dependencies": {
+    "@react-hookz/deep-equal": "^1.0.1"
+  },
   "peerDependencies": {
@@ -87,3 +89,3 @@ "js-cookie": "^3.0.1",
     "@jamesacarr/jest-reporter-github-actions": "^0.0.4",
-    "@react-hookz/eslint-config": "^1.3.3",
+    "@react-hookz/eslint-config": "^1.3.4",
     "@semantic-release/changelog": "^6.0.1",
@@ -90,0 +92,0 @@ "@semantic-release/git": "^10.0.1",

README.md

@@ -13,5 +13,4 @@ <div align="center">
 
-× **[DOCS](https://react-hookz.github.io/web/)**
-× **[DISCORD](https://discord.gg/Fjwphtu65f)**
-× **[CHANGELOG](https://github.com/react-hookz/web/blob/master/CHANGELOG.md)** ×
+× **[DOCS](https://react-hookz.github.io/web/)** × **[DISCORD](https://discord.gg/Fjwphtu65f)** ×
+**[CHANGELOG](https://github.com/react-hookz/web/blob/master/CHANGELOG.md)** ×
 
@@ -62,4 +61,4 @@ </div>
 
-Coming from `react-use`? Check out
-our [migration guide](https://react-hookz.github.io/web/?path=/docs/migrating-from-react-use--page).
+Coming from `react-use`? Check out our
+[migration guide](https://react-hookz.github.io/web/?path=/docs/migrating-from-react-use--page).
 
@@ -82,5 +81,8 @@ ## Hooks list
   - [**`useCustomCompareEffect`**](https://react-hookz.github.io/web/?path=/docs/lifecycle-usecustomcompareeffect--example)
-    — Like `useEffect` but uses provided comparator function to validate dependencies change.
+    — Like `useEffect` but uses provided comparator function to validate dependency changes.
   - [**`useDebouncedEffect`**](https://react-hookz.github.io/web/?path=/docs/lifecycle-usedebouncedeffect--example)
     — Like `useEffect`, but passed function is debounced.
+  - [**`useDeepCompareEffect`**](https://react-hookz.github.io/web/?path=/docs/lifecycle-usedeepcompareeffect--example)
+    — Like `useEffect` but uses `@react-hookz/deep-equal` comparator function to validate deep
+    dependency changes.
   - [**`useFirstMountState`**](https://react-hookz.github.io/web/?path=/docs/lifecycle-usefirstmountstate--example)
@@ -107,14 +109,14 @@ — Return boolean that is `true` only on first render.
     — Like `useSafeState` but its state setter is debounced.
-  - [**`useMap`**](https://react-hookz.github.io/web/?path=/docs/state-usemap--example)
-    — Tracks the state of a `Map`.
+  - [**`useMap`**](https://react-hookz.github.io/web/?path=/docs/state-usemap--example) — Tracks the
+    state of a `Map`.
   - [**`useMediatedState`**](https://react-hookz.github.io/web/?path=/docs/state-usemediatedstate--example)
     — Like `useState`, but every value set is passed through a mediator function.
-  - [**`usePrevious`**](https://react-hookz.github.io/web/?path=/docs/state-useprevious--example)
-    — Returns the value passed to the hook on previous render.
-  - [**`useSafeState`**](https://react-hookz.github.io/web/?path=/docs/state-usesafestate--page)
-    — Like `useState`, but its state setter is guarded against sets on unmounted component.
-  - [**`useSet`**](https://react-hookz.github.io/web/?path=/docs/state-useset--example)
-    — Tracks the state of a `Set`.
-  - [**`useToggle`**](https://react-hookz.github.io/web/?path=/docs/state-usetoggle--example)
-    — Like `useState`, but can only become `true` or `false`.
+  - [**`usePrevious`**](https://react-hookz.github.io/web/?path=/docs/state-useprevious--example) —
+    Returns the value passed to the hook on previous render.
+  - [**`useSafeState`**](https://react-hookz.github.io/web/?path=/docs/state-usesafestate--page) —
+    Like `useState`, but its state setter is guarded against sets on unmounted component.
+  - [**`useSet`**](https://react-hookz.github.io/web/?path=/docs/state-useset--example) — Tracks the
+    state of a `Set`.
+  - [**`useToggle`**](https://react-hookz.github.io/web/?path=/docs/state-usetoggle--example) — Like
+    `useState`, but can only become `true` or `false`.
   - [**`useThrottledState`**](https://react-hookz.github.io/web/?path=/docs/state-usethrottledstate--example)
@@ -139,7 +141,6 @@ — Like `useSafeState` but its state setter is throttled.
 
-  - [**`useAsync`**](https://react-hookz.github.io/web/?path=/docs/side-effect-useasync--example)
-    — Executes provided async function and tracks its result and error.
+  - [**`useAsync`**](https://react-hookz.github.io/web/?path=/docs/side-effect-useasync--example) —
+    Executes provided async function and tracks its result and error.
   - [**`useAsyncAbortable`**](https://react-hookz.github.io/web/?path=/docs/side-effect-useasyncabortable--example)
-    — Like `useAsync`, but also provides `AbortSignal` as first function argument to async
-    function.
+    — Like `useAsync`, but also provides `AbortSignal` as first function argument to async function.
   - [**`useCookieValue`**](https://react-hookz.github.io/web/?path=/docs/side-effect-usecookievalue--example)
@@ -157,4 +158,4 @@ — Manages a single cookie.
     top-level document's viewport.
-  - [**`useMeasure`**](https://react-hookz.github.io/web/?path=/docs/sensor-usemeasure--example)
-    — Uses ResizeObserver to track element dimensions and re-render component when they change.
+  - [**`useMeasure`**](https://react-hookz.github.io/web/?path=/docs/sensor-usemeasure--example) —
+    Uses ResizeObserver to track element dimensions and re-render component when they change.
   - [**`useMediaQuery`**](https://react-hookz.github.io/web/?path=/docs/sensor-usemediaquery--example)
@@ -161,0 +162,0 @@ — Tracks the state of CSS media query.

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

376487

increased by2.27%

Number of package files

274

increased by2.24%

Lines of code

7586

increased by1.81%

Number of lines in readme file

170

increased by0.59%

Worsened metrics

Dependency count

4

increased by33.33%

Dependency changes

• + Added@react-hookz/deep-equal@^1.0.1

• + Added@react-hookz/deep-equal@1.0.4(transitive)