@react-hookz/web - npm Package Compare versions

Comparing version 22.0.0 to 23.0.0

cjs/index.d.ts

@@ -33,3 +33,2 @@ export * from './useDebouncedCallback';
 export * from './useRenderCount';
-export * from './useSafeState';
 export * from './useSet';
@@ -36,0 +35,0 @@ export * from './useToggle';

cjs/index.js

@@ -53,3 +53,2 @@ "use strict";
 __exportStar(require("./useRenderCount"), exports);
-__exportStar(require("./useSafeState"), exports);
 __exportStar(require("./useSet"), exports);
@@ -56,0 +55,0 @@ __exportStar(require("./useToggle"), exports);

cjs/useAsync/index.js

@@ -5,3 +5,2 @@ "use strict";
 const react_1 = require("react");
-const useSafeState_1 = require("../useSafeState");
 const useSyncedRef_1 = require("../useSyncedRef");
@@ -16,3 +15,3 @@ /**
 function useAsync(asyncFn, initialValue) {
-    const [state, setState] = (0, useSafeState_1.useSafeState)({
+    const [state, setState] = (0, react_1.useState)({
         status: 'not-executed',
@@ -19,0 +18,0 @@ error: undefined,

cjs/useConditionalEffect/index.d.ts

 import { DependencyList } from 'react';
-import { EffectHook, EffectCallback } from '../util/misc';
+import { EffectCallback, EffectHook } from '../util/misc';
 import type { ConditionsList, ConditionsPredicate } from '../types';
 /**
- * Like `useEffect` but callback invoked only if conditions match predicate.
+ * Like `useEffect` but its callback is invoked only if all given conditions match a given predicate.
  *
- * @param callback Function that will be passed to underlying effect hook.
- * @param deps Dependencies list like for `useEffect`. If not undefined - effect will be
- * triggered when deps change AND conditions satisfy predicate.
- * @param conditions Conditions array.
- * @param predicate Predicate that defines whether conditions satisfying certain
- * provision. By default, it is all-truthy provision, meaning that all
- * conditions should be truthy.
- * @param effectHook Effect hook that will be used to run callback. Must comply `useEffect`
- * signature, meaning that callback should be placed as first argument and dependencies list
- * as second.
- * @param effectHookRestArgs Extra arguments that are passed to `effectHook`.
+ * @param callback Function that will be passed to the underlying effect hook.
+ * @param deps Dependency list like the one passed to `useEffect`. If not
+ * `undefined`, the effect will be triggered when the dependencies change and the given `conditions`
+ * satisfy the `predicate`.
+ * @param conditions List of conditions.
+ * @param predicate Predicate that should be satisfied by every condition in `conditions`. By
+ * default, the predicate checks that every condition in `conditions` is truthy.
+ * @param effectHook Effect hook that will be used to run `callback`. Must match the type signature
+ * of `useEffect`, meaning that the `callback` should be placed as the first argument and the
+ * dependency list as second.
+ * @param effectHookRestArgs Extra arguments that are passed to the `effectHook` after the
+ * `callback` and the dependency list.
  */
 export declare function useConditionalEffect<Cond extends ConditionsList, Callback extends EffectCallback = EffectCallback, Deps extends DependencyList | undefined = DependencyList | undefined, HookRestArgs extends any[] = any[], R extends HookRestArgs = HookRestArgs>(callback: Callback, deps: Deps, conditions: Cond, predicate?: ConditionsPredicate<Cond>, effectHook?: EffectHook<Callback, Deps, HookRestArgs>, ...effectHookRestArgs: R): void;

cjs/useConditionalEffect/index.js

@@ -8,15 +8,16 @@ "use strict";
 /**
- * Like `useEffect` but callback invoked only if conditions match predicate.
+ * Like `useEffect` but its callback is invoked only if all given conditions match a given predicate.
  *
- * @param callback Function that will be passed to underlying effect hook.
- * @param deps Dependencies list like for `useEffect`. If not undefined - effect will be
- * triggered when deps change AND conditions satisfy predicate.
- * @param conditions Conditions array.
- * @param predicate Predicate that defines whether conditions satisfying certain
- * provision. By default, it is all-truthy provision, meaning that all
- * conditions should be truthy.
- * @param effectHook Effect hook that will be used to run callback. Must comply `useEffect`
- * signature, meaning that callback should be placed as first argument and dependencies list
- * as second.
- * @param effectHookRestArgs Extra arguments that are passed to `effectHook`.
+ * @param callback Function that will be passed to the underlying effect hook.
+ * @param deps Dependency list like the one passed to `useEffect`. If not
+ * `undefined`, the effect will be triggered when the dependencies change and the given `conditions`
+ * satisfy the `predicate`.
+ * @param conditions List of conditions.
+ * @param predicate Predicate that should be satisfied by every condition in `conditions`. By
+ * default, the predicate checks that every condition in `conditions` is truthy.
+ * @param effectHook Effect hook that will be used to run `callback`. Must match the type signature
+ * of `useEffect`, meaning that the `callback` should be placed as the first argument and the
+ * dependency list as second.
+ * @param effectHookRestArgs Extra arguments that are passed to the `effectHook` after the
+ * `callback` and the dependency list.
  */
@@ -23,0 +24,0 @@ function useConditionalEffect(callback, deps, conditions, predicate = const_1.truthyAndArrayPredicate, effectHook = react_1.useEffect, ...effectHookRestArgs) {

cjs/useCookieValue/index.js

@@ -12,3 +12,2 @@ "use strict";
 const useMountEffect_1 = require("../useMountEffect");
-const useSafeState_1 = require("../useSafeState");
 const useSyncedRef_1 = require("../useSyncedRef");
@@ -84,3 +83,3 @@ const const_1 = require("../util/const");
     const isFirstMount = (0, useFirstMountState_1.useFirstMountState)();
-    const [state, setState] = (0, useSafeState_1.useSafeState)(isFirstMount && initializeWithValue ? methods.current.fetchVal() : undefined);
+    const [state, setState] = (0, react_1.useState)(isFirstMount && initializeWithValue ? methods.current.fetchVal() : undefined);
     (0, useMountEffect_1.useMountEffect)(() => {
@@ -87,0 +86,0 @@ if (!initializeWithValue) {

cjs/useCustomCompareEffect/index.d.ts

@@ -7,11 +7,12 @@ import { DependencyList } from 'react';
  *
- * @param callback Function that will be passed to underlying effect hook.
- * @param deps Dependencies list, like for `useEffect` hook.
- * @param comparator Function that compares two dependencies arrays, and returns true in case
- * they're equal.
- * @param effectHook Effect hook that will be used to run callback. Must comply `useEffect`
- * signature, meaning that callback should be placed as first argument and dependencies list
- * as second.
- * @param effectHookRestArgs Extra arguments that passed to effectHook.
+ * @param callback Function that will be passed to the underlying effect hook.
+ * @param deps Dependency list like the one passed to `useEffect`.
+ * @param comparator Function that compares two dependency arrays,
+ * and returns `true` if they're equal.
+ * @param effectHook Effect hook that will be used to run
+ * `callback`. Must match the type signature of `useEffect`, meaning that the `callback` should be
+ * placed as the first argument and the dependency list as second.
+ * @param effectHookRestArgs Extra arguments that are passed to the `effectHook`
+ * after the `callback` and the dependency list.
  */
 export declare function useCustomCompareEffect<Callback extends EffectCallback = EffectCallback, Deps extends DependencyList = DependencyList, HookRestArgs extends any[] = any[], R extends HookRestArgs = HookRestArgs>(callback: Callback, deps: Deps, comparator?: DependenciesComparator<Deps>, effectHook?: EffectHook<Callback, Deps, HookRestArgs>, ...effectHookRestArgs: R): void;

cjs/useCustomCompareEffect/index.js

@@ -11,14 +11,15 @@ "use strict";
  *
- * @param callback Function that will be passed to underlying effect hook.
- * @param deps Dependencies list, like for `useEffect` hook.
- * @param comparator Function that compares two dependencies arrays, and returns true in case
- * they're equal.
- * @param effectHook Effect hook that will be used to run callback. Must comply `useEffect`
- * signature, meaning that callback should be placed as first argument and dependencies list
- * as second.
- * @param effectHookRestArgs Extra arguments that passed to effectHook.
+ * @param callback Function that will be passed to the underlying effect hook.
+ * @param deps Dependency list like the one passed to `useEffect`.
+ * @param comparator Function that compares two dependency arrays,
+ * and returns `true` if they're equal.
+ * @param effectHook Effect hook that will be used to run
+ * `callback`. Must match the type signature of `useEffect`, meaning that the `callback` should be
+ * placed as the first argument and the dependency list as second.
+ * @param effectHookRestArgs Extra arguments that are passed to the `effectHook`
+ * after the `callback` and the dependency list.
  */
 function useCustomCompareEffect(callback, deps, comparator = misc_1.basicDepsComparator, effectHook = react_1.useEffect, ...effectHookRestArgs) {
     const dependencies = (0, react_1.useRef)();
-    // Effects not working in SSR environment therefore no sense to invoke comparator
+    // Effects are not run during SSR, therefore, it makes no sense to invoke the comparator
     if (dependencies.current === undefined ||
@@ -25,0 +26,0 @@ (const_1.isBrowser && !comparator(dependencies.current, deps))) {

cjs/useDebouncedEffect/index.d.ts

 import { DependencyList } from 'react';
 /**
- * Like `useEffect`, but passed function is debounced.
+ * Like `useEffect`, but the passed function is debounced.
  *
  * @param callback Callback like for `useEffect`, but without ability to return
  * a cleanup function.
- * @param deps Dependencies list that will be passed to underlying `useEffect`
- * and `useDebouncedCallback`.
- * @param delay Debounce delay.
- * @param maxWait Maximum amount of milliseconds that function can be delayed
- * before it's force execution. 0 means no max wait.
+ * @param deps Dependency list like the one passed to `useEffect`.
+ * @param delay Debounce delay (in milliseconds).
+ * @param maxWait The maximum time `callback` is allowed to be delayed
+ * before it's invoked. `0` means no max wait.
  */
 export declare function useDebouncedEffect(callback: (...args: any[]) => void, deps: DependencyList, delay: number, maxWait?: number): void;

cjs/useDebouncedEffect/index.js

@@ -8,11 +8,10 @@ "use strict";
 /**
- * Like `useEffect`, but passed function is debounced.
+ * Like `useEffect`, but the passed function is debounced.
  *
  * @param callback Callback like for `useEffect`, but without ability to return
  * a cleanup function.
- * @param deps Dependencies list that will be passed to underlying `useEffect`
- * and `useDebouncedCallback`.
- * @param delay Debounce delay.
- * @param maxWait Maximum amount of milliseconds that function can be delayed
- * before it's force execution. 0 means no max wait.
+ * @param deps Dependency list like the one passed to `useEffect`.
+ * @param delay Debounce delay (in milliseconds).
+ * @param maxWait The maximum time `callback` is allowed to be delayed
+ * before it's invoked. `0` means no max wait.
  */
@@ -19,0 +18,0 @@ function useDebouncedEffect(callback, deps, delay, maxWait = 0) {

cjs/useDebouncedState/index.d.ts

 import { Dispatch, SetStateAction } from 'react';
 /**
- * Like `useSafeState` but its state setter is debounced.
+ * Like `useState` but its state setter is debounced.
  *
- * @param initialState Initial state to pass to underlying `useSafeState`.
+ * @param initialState Initial state to pass to underlying `useState`.
  * @param delay Debounce delay.
@@ -7,0 +7,0 @@ * @param maxWait Maximum amount of milliseconds that function can be delayed

cjs/useDebouncedState/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDebouncedState = void 0;
+const react_1 = require("react");
 const useDebouncedCallback_1 = require("../useDebouncedCallback");
-const useSafeState_1 = require("../useSafeState");
 /**
- * Like `useSafeState` but its state setter is debounced.
+ * Like `useState` but its state setter is debounced.
  *
- * @param initialState Initial state to pass to underlying `useSafeState`.
+ * @param initialState Initial state to pass to underlying `useState`.
  * @param delay Debounce delay.
@@ -15,5 +15,5 @@ * @param maxWait Maximum amount of milliseconds that function can be delayed
 function useDebouncedState(initialState, delay, maxWait = 0) {
-    const [state, setState] = (0, useSafeState_1.useSafeState)(initialState);
+    const [state, setState] = (0, react_1.useState)(initialState);
     return [state, (0, useDebouncedCallback_1.useDebouncedCallback)(setState, [], delay, maxWait)];
 }
 exports.useDebouncedState = useDebouncedState;

cjs/useDeepCompareEffect/index.d.ts

 import { DependencyList } from 'react';
 import { EffectCallback, EffectHook } from '../util/misc';
 /**
- * Like `useEffect` but uses `@react-hookz/deep-equal` comparator function to validate deep
+ * Like `useEffect`, but uses `@react-hookz/deep-equal` comparator function to validate deep
  * dependency changes.
  *
- * @param callback Function that will be passed to underlying effect hook.
- * @param deps Dependencies list, like for `useEffect` hook.
- * @param effectHook Effect hook that will be used to run callback. Must comply `useEffect`
- * signature, meaning that callback should be placed as first argument and dependencies list
- * as second.
- * @param effectHookRestArgs Extra arguments that passed to effectHook.
+ * @param callback Function that will be passed to the underlying effect hook.
+ * @param deps Dependency list like the one passed to `useEffect`.
+ * @param effectHook Effect hook that will be used to run
+ * `callback`. Must match the type signature of `useEffect`, meaning that the `callback` should be
+ * placed as the first argument and the dependency list as second.
+ * @param effectHookRestArgs Extra arguments that are passed to the `effectHook`
+ * after the `callback` and the dependency list.
  */
 export declare function useDeepCompareEffect<Callback extends EffectCallback = EffectCallback, Deps extends DependencyList = DependencyList, HookRestArgs extends any[] = any[], R extends HookRestArgs = HookRestArgs>(callback: Callback, deps: Deps, effectHook?: EffectHook<Callback, Deps, HookRestArgs>, ...effectHookRestArgs: R): void;

cjs/useDeepCompareEffect/index.js

@@ -8,11 +8,12 @@ "use strict";
 /**
- * Like `useEffect` but uses `@react-hookz/deep-equal` comparator function to validate deep
+ * Like `useEffect`, but uses `@react-hookz/deep-equal` comparator function to validate deep
  * dependency changes.
  *
- * @param callback Function that will be passed to underlying effect hook.
- * @param deps Dependencies list, like for `useEffect` hook.
- * @param effectHook Effect hook that will be used to run callback. Must comply `useEffect`
- * signature, meaning that callback should be placed as first argument and dependencies list
- * as second.
- * @param effectHookRestArgs Extra arguments that passed to effectHook.
+ * @param callback Function that will be passed to the underlying effect hook.
+ * @param deps Dependency list like the one passed to `useEffect`.
+ * @param effectHook Effect hook that will be used to run
+ * `callback`. Must match the type signature of `useEffect`, meaning that the `callback` should be
+ * placed as the first argument and the dependency list as second.
+ * @param effectHookRestArgs Extra arguments that are passed to the `effectHook`
+ * after the `callback` and the dependency list.
  */
@@ -19,0 +20,0 @@ function useDeepCompareEffect(callback, deps, effectHook = react_1.useEffect, ...effectHookRestArgs) {

cjs/useDocumentVisibility/index.js

@@ -12,4 +12,4 @@ "use strict";
  *
- * @param initializeWithValue Whether to initialize state with the cookie value or `undefined`.
- *        _We suggest setting this to `false` during SSR._
+ * @param initializeWithValue Whether to initialize with the document visibility state or
+ * `undefined`. _Set this to `false` during SSR._
  */
@@ -16,0 +16,0 @@ function useDocumentVisibility(initializeWithValue = true) {

cjs/useFirstMountState/index.d.ts

 /**
- * Return boolean that is `true` only on first render.
+ * Returns a boolean that is `true` only on first render.
  */
 export declare function useFirstMountState(): boolean;

cjs/useFirstMountState/index.js

@@ -6,3 +6,3 @@ "use strict";
 /**
- * Return boolean that is `true` only on first render.
+ * Returns a boolean that is `true` only on first render.
  */
@@ -9,0 +9,0 @@ function useFirstMountState() {

cjs/useFunctionalState/index.js

@@ -5,10 +5,8 @@ "use strict";
 const react_1 = require("react");
-const useSafeState_1 = require("../useSafeState");
 const useSyncedRef_1 = require("../useSyncedRef");
 /**
- * Like `useState` but instead of raw state, state getter returned. `useSafeState` is
- * used underneath.
+ * Like `useState` but instead of raw state, state getter returned.
  */
 function useFunctionalState(initialState) {
-    const [state, setState] = (0, useSafeState_1.useSafeState)(initialState);
+    const [state, setState] = (0, react_1.useState)(initialState);
     const stateRef = (0, useSyncedRef_1.useSyncedRef)(state);
@@ -15,0 +13,0 @@ // eslint-disable-next-line react-hooks/exhaustive-deps

cjs/useIntersectionObserver/index.js

@@ -5,3 +5,2 @@ "use strict";
 const react_1 = require("react");
-const useSafeState_1 = require("../useSafeState");
 const DEFAULT_THRESHOLD = [0];
@@ -75,3 +74,3 @@ const DEFAULT_ROOT_MARGIN = '0px';
 function useIntersectionObserver(target, { threshold = DEFAULT_THRESHOLD, root: r, rootMargin = DEFAULT_ROOT_MARGIN, } = {}) {
-    const [state, setState] = (0, useSafeState_1.useSafeState)();
+    const [state, setState] = (0, react_1.useState)();
     (0, react_1.useEffect)(() => {
@@ -78,0 +77,0 @@ const tgt = target && 'current' in target ? target.current : target;

cjs/useIntervalEffect/index.d.ts

 /**
- * Like `setInterval` but in form of react hook.
+ * Like `setInterval` but in the form of a React hook.
  *
- * @param callback Callback to be called within interval.
- * @param ms Interval delay in milliseconds, `undefined` disables the interval.
- * Keep in mind, that changing this parameter will re-set interval, meaning
- * that it will be set as new after the change.
+ * @param callback Function to call within the interval.
+ * @param ms Delay passed to the underlying `setInterval`. If set to `undefined`, the interval will
+ * be cancelled. Keep in mind, that changing this parameter will reset the interval.
  */
 export declare function useIntervalEffect(callback: () => void, ms?: number): void;

cjs/useIntervalEffect/index.js

@@ -7,8 +7,7 @@ "use strict";
 /**
- * Like `setInterval` but in form of react hook.
+ * Like `setInterval` but in the form of a React hook.
  *
- * @param callback Callback to be called within interval.
- * @param ms Interval delay in milliseconds, `undefined` disables the interval.
- * Keep in mind, that changing this parameter will re-set interval, meaning
- * that it will be set as new after the change.
+ * @param callback Function to call within the interval.
+ * @param ms Delay passed to the underlying `setInterval`. If set to `undefined`, the interval will
+ * be cancelled. Keep in mind, that changing this parameter will reset the interval.
  */
@@ -15,0 +14,0 @@ function useIntervalEffect(callback, ms) {

cjs/useIsMounted/index.d.ts

 /**
- * Returns function that yields current mount state.
+ * Returns a function that returns the current mount state. This hook is useful when you have to
+ * detect component mount state within async effects.
  *
- * Returned function yields `true` only in case component is mounted. This hook
- * is handy for the cases when you have to detect component mount state within
- * async effects.
+ * @param initialValue Initial value.
  *
- * @param initialValue Initial value. By default, this hook assumes that hook is
- * not mounted yet at first render.
+ * @return Function that returns `true` only if the component is mounted.
  */
 export declare function useIsMounted(initialValue?: boolean): () => boolean;

cjs/useIsMounted/index.js

@@ -6,10 +6,8 @@ "use strict";
 /**
- * Returns function that yields current mount state.
+ * Returns a function that returns the current mount state. This hook is useful when you have to
+ * detect component mount state within async effects.
  *
- * Returned function yields `true` only in case component is mounted. This hook
- * is handy for the cases when you have to detect component mount state within
- * async effects.
+ * @param initialValue Initial value.
  *
- * @param initialValue Initial value. By default, this hook assumes that hook is
- * not mounted yet at first render.
+ * @return Function that returns `true` only if the component is mounted.
  */
@@ -16,0 +14,0 @@ function useIsMounted(initialValue = false) {

cjs/useMeasure/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMeasure = void 0;
+const react_1 = require("react");
 const useResizeObserver_1 = require("../useResizeObserver");
 const useHookableRef_1 = require("../useHookableRef");
 const useRafCallback_1 = require("../useRafCallback");
-const useSafeState_1 = require("../useSafeState");
 /**
@@ -14,3 +14,3 @@ * Uses ResizeObserver to track element dimensions and re-render component when they change.
 function useMeasure(enabled = true) {
-    const [element, setElement] = (0, useSafeState_1.useSafeState)(null);
+    const [element, setElement] = (0, react_1.useState)(null);
     const elementRef = (0, useHookableRef_1.useHookableRef)(null, (v) => {
@@ -20,3 +20,3 @@ setElement(v);
     });
-    const [measures, setMeasures] = (0, useSafeState_1.useSafeState)();
+    const [measures, setMeasures] = (0, react_1.useState)();
     const [observerHandler] = (0, useRafCallback_1.useRafCallback)((entry) => setMeasures({ width: entry.contentRect.width, height: entry.contentRect.height }));
@@ -23,0 +23,0 @@ (0, useResizeObserver_1.useResizeObserver)(element, observerHandler, enabled);

cjs/useMediatedState/index.js

@@ -5,3 +5,2 @@ "use strict";
 const react_1 = require("react");
-const useSafeState_1 = require("../useSafeState");
 const useSyncedRef_1 = require("../useSyncedRef");
@@ -13,3 +12,3 @@ const resolveHookState_1 = require("../util/resolveHookState");
 function useMediatedState(initialState, mediator) {
-    const [state, setState] = (0, useSafeState_1.useSafeState)(() => {
+    const [state, setState] = (0, react_1.useState)(() => {
         return mediator ? mediator((0, resolveHookState_1.resolveHookState)(initialState)) : initialState;
@@ -16,0 +15,0 @@ });

cjs/useNetworkState/index.js

@@ -6,3 +6,2 @@ "use strict";
 const const_1 = require("../util/const");
-const useSafeState_1 = require("../useSafeState");
 const misc_1 = require("../util/misc");
@@ -30,3 +29,3 @@ const navigator = const_1.isBrowser ? window.navigator : undefined;
 function useNetworkState(initialState) {
-    const [state, setState] = (0, useSafeState_1.useSafeState)(initialState ?? getConnectionState);
+    const [state, setState] = (0, react_1.useState)(initialState ?? getConnectionState);
     (0, react_1.useEffect)(() => {
@@ -33,0 +32,0 @@ const handleStateChange = () => {

cjs/usePermission/index.js

@@ -5,3 +5,2 @@ "use strict";
 const react_1 = require("react");
-const useSafeState_1 = require("../useSafeState");
 const misc_1 = require("../util/misc");
@@ -14,3 +13,3 @@ /**
 function usePermission(descriptor) {
-    const [state, setState] = (0, useSafeState_1.useSafeState)('not-requested');
+    const [state, setState] = (0, react_1.useState)('not-requested');
     (0, react_1.useEffect)(() => {
@@ -17,0 +16,0 @@ const unmount = { current: null };

cjs/useRafState/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRafState = void 0;
+const react_1 = require("react");
 const useRafCallback_1 = require("../useRafCallback");
-const useSafeState_1 = require("../useSafeState");
 const useUnmountEffect_1 = require("../useUnmountEffect");
@@ -11,3 +11,3 @@ /**
 function useRafState(initialState) {
-    const [state, innerSetState] = (0, useSafeState_1.useSafeState)(initialState);
+    const [state, innerSetState] = (0, react_1.useState)(initialState);
     const [setState, cancelRaf] = (0, useRafCallback_1.useRafCallback)(innerSetState);
@@ -14,0 +14,0 @@ (0, useUnmountEffect_1.useUnmountEffect)(cancelRaf);

cjs/useRerender/index.js

@@ -5,3 +5,2 @@ "use strict";
 const react_1 = require("react");
-const useSafeState_1 = require("../useSafeState");
 const stateChanger = (state) => (state + 1) % Number.MAX_SAFE_INTEGER;
@@ -12,3 +11,3 @@ /**
 function useRerender() {
-    const [, setState] = (0, useSafeState_1.useSafeState)(0);
+    const [, setState] = (0, react_1.useState)(0);
     return (0, react_1.useCallback)(() => {
@@ -15,0 +14,0 @@ setState(stateChanger);

cjs/useStorageValue/index.d.ts

@@ -23,5 +23,5 @@ import { NextState } from '../util/resolveHookState';
      */
-    stringify?: (data: unknown) => string | null;
+    stringify?: (data: T) => string | null;
 }
-type UseStorageValueValue<Type, Default extends Type = Type, Initialize extends boolean | undefined = boolean | undefined, N = Default extends null | undefined ? null | Type : Type, U = Initialize extends false | undefined ? undefined | N : N> = U;
+type UseStorageValueValue<Type, Default extends Type = Type, Initialize extends boolean | undefined = boolean | undefined, N = Default extends null | undefined ? null | Type : Type, U = Initialize extends false ? undefined | N : N> = U;
 export interface UseStorageValueResult<Type, Default extends Type = Type, Initialize extends boolean | undefined = boolean | undefined> {
@@ -28,0 +28,0 @@ value: UseStorageValueValue<Type, Default, Initialize>;

cjs/useThrottledState/index.d.ts

 import { Dispatch, SetStateAction } from 'react';
 /**
- * Like `useSafeState` but its state setter is throttled.
+ * Like `useState` but its state setter is throttled.
  *
- * @param initialState Initial state to pass to underlying `useSafeState`.
+ * @param initialState Initial state to pass to underlying `useState`.
  * @param delay Throttle delay.
@@ -7,0 +7,0 @@ * @param noTrailing If `noTrailing` is true, callback will only execute every

cjs/useThrottledState/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useThrottledState = void 0;
-const useSafeState_1 = require("../useSafeState");
+const react_1 = require("react");
 const useThrottledCallback_1 = require("../useThrottledCallback");
 /**
- * Like `useSafeState` but its state setter is throttled.
+ * Like `useState` but its state setter is throttled.
  *
- * @param initialState Initial state to pass to underlying `useSafeState`.
+ * @param initialState Initial state to pass to underlying `useState`.
  * @param delay Throttle delay.
@@ -16,5 +16,5 @@ * @param noTrailing If `noTrailing` is true, callback will only execute every
 function useThrottledState(initialState, delay, noTrailing = false) {
-    const [state, setState] = (0, useSafeState_1.useSafeState)(initialState);
+    const [state, setState] = (0, react_1.useState)(initialState);
     return [state, (0, useThrottledCallback_1.useThrottledCallback)(setState, [], delay, noTrailing)];
 }
 exports.useThrottledState = useThrottledState;

cjs/useToggle/index.js

@@ -6,6 +6,5 @@ "use strict";
 const useSyncedRef_1 = require("../useSyncedRef");
-const useSafeState_1 = require("../useSafeState");
 const resolveHookState_1 = require("../util/resolveHookState");
 /**
- * Like `useSafeState`, but can only become `true` or `false`.
+ * Like `useState`, but can only become `true` or `false`.
  *
@@ -21,3 +20,3 @@ * State setter, in case called without arguments, will change the state to opposite. React
     // toggle logic.
-    const [state, setState] = (0, useSafeState_1.useSafeState)(initialState);
+    const [state, setState] = (0, react_1.useState)(initialState);
     const ignoreReactEventsRef = (0, useSyncedRef_1.useSyncedRef)(ignoreReactEvents);
@@ -24,0 +23,0 @@ return [

cjs/useValidator/index.js

@@ -5,3 +5,2 @@ "use strict";
 const react_1 = require("react");
-const useSafeState_1 = require("../useSafeState");
 const useSyncedRef_1 = require("../useSyncedRef");
@@ -16,3 +15,3 @@ /**
 function useValidator(validator, deps, initialValidity = { isValid: undefined }) {
-    const [validity, setValidity] = (0, useSafeState_1.useSafeState)(initialValidity);
+    const [validity, setValidity] = (0, react_1.useState)(initialValidity);
     const validatorRef = (0, useSyncedRef_1.useSyncedRef)(() => {
@@ -19,0 +18,0 @@ if (validator.length) {

esm/index.d.ts

@@ -33,3 +33,2 @@ export * from './useDebouncedCallback';
 export * from './useRenderCount';
-export * from './useSafeState';
 export * from './useSet';
@@ -36,0 +35,0 @@ export * from './useToggle';

esm/index.js

@@ -36,3 +36,2 @@ // Callback
 export * from './useRenderCount';
-export * from './useSafeState';
 export * from './useSet';
@@ -39,0 +38,0 @@ export * from './useToggle';

esm/useAsync/index.js

@@ -1,3 +0,2 @@
-import { useMemo, useRef } from 'react';
-import { useSafeState } from '../useSafeState';
+import { useMemo, useRef, useState } from 'react';
 import { useSyncedRef } from '../useSyncedRef';
@@ -12,3 +11,3 @@ /**
 export function useAsync(asyncFn, initialValue) {
-    const [state, setState] = useSafeState({
+    const [state, setState] = useState({
         status: 'not-executed',
@@ -15,0 +14,0 @@ error: undefined,

esm/useConditionalEffect/index.d.ts

 import { DependencyList } from 'react';
-import { EffectHook, EffectCallback } from '../util/misc';
+import { EffectCallback, EffectHook } from '../util/misc';
 import type { ConditionsList, ConditionsPredicate } from '../types';
 /**
- * Like `useEffect` but callback invoked only if conditions match predicate.
+ * Like `useEffect` but its callback is invoked only if all given conditions match a given predicate.
  *
- * @param callback Function that will be passed to underlying effect hook.
- * @param deps Dependencies list like for `useEffect`. If not undefined - effect will be
- * triggered when deps change AND conditions satisfy predicate.
- * @param conditions Conditions array.
- * @param predicate Predicate that defines whether conditions satisfying certain
- * provision. By default, it is all-truthy provision, meaning that all
- * conditions should be truthy.
- * @param effectHook Effect hook that will be used to run callback. Must comply `useEffect`
- * signature, meaning that callback should be placed as first argument and dependencies list
- * as second.
- * @param effectHookRestArgs Extra arguments that are passed to `effectHook`.
+ * @param callback Function that will be passed to the underlying effect hook.
+ * @param deps Dependency list like the one passed to `useEffect`. If not
+ * `undefined`, the effect will be triggered when the dependencies change and the given `conditions`
+ * satisfy the `predicate`.
+ * @param conditions List of conditions.
+ * @param predicate Predicate that should be satisfied by every condition in `conditions`. By
+ * default, the predicate checks that every condition in `conditions` is truthy.
+ * @param effectHook Effect hook that will be used to run `callback`. Must match the type signature
+ * of `useEffect`, meaning that the `callback` should be placed as the first argument and the
+ * dependency list as second.
+ * @param effectHookRestArgs Extra arguments that are passed to the `effectHook` after the
+ * `callback` and the dependency list.
  */
 export declare function useConditionalEffect<Cond extends ConditionsList, Callback extends EffectCallback = EffectCallback, Deps extends DependencyList | undefined = DependencyList | undefined, HookRestArgs extends any[] = any[], R extends HookRestArgs = HookRestArgs>(callback: Callback, deps: Deps, conditions: Cond, predicate?: ConditionsPredicate<Cond>, effectHook?: EffectHook<Callback, Deps, HookRestArgs>, ...effectHookRestArgs: R): void;

esm/useConditionalEffect/index.js

@@ -5,15 +5,16 @@ /* eslint-disable @typescript-eslint/no-explicit-any */
 /**
- * Like `useEffect` but callback invoked only if conditions match predicate.
+ * Like `useEffect` but its callback is invoked only if all given conditions match a given predicate.
  *
- * @param callback Function that will be passed to underlying effect hook.
- * @param deps Dependencies list like for `useEffect`. If not undefined - effect will be
- * triggered when deps change AND conditions satisfy predicate.
- * @param conditions Conditions array.
- * @param predicate Predicate that defines whether conditions satisfying certain
- * provision. By default, it is all-truthy provision, meaning that all
- * conditions should be truthy.
- * @param effectHook Effect hook that will be used to run callback. Must comply `useEffect`
- * signature, meaning that callback should be placed as first argument and dependencies list
- * as second.
- * @param effectHookRestArgs Extra arguments that are passed to `effectHook`.
+ * @param callback Function that will be passed to the underlying effect hook.
+ * @param deps Dependency list like the one passed to `useEffect`. If not
+ * `undefined`, the effect will be triggered when the dependencies change and the given `conditions`
+ * satisfy the `predicate`.
+ * @param conditions List of conditions.
+ * @param predicate Predicate that should be satisfied by every condition in `conditions`. By
+ * default, the predicate checks that every condition in `conditions` is truthy.
+ * @param effectHook Effect hook that will be used to run `callback`. Must match the type signature
+ * of `useEffect`, meaning that the `callback` should be placed as the first argument and the
+ * dependency list as second.
+ * @param effectHookRestArgs Extra arguments that are passed to the `effectHook` after the
+ * `callback` and the dependency list.
  */
@@ -20,0 +21,0 @@ export function useConditionalEffect(callback, deps, conditions, predicate = truthyAndArrayPredicate, effectHook = useEffect, ...effectHookRestArgs) {

esm/useCookieValue/index.js

 /* eslint-disable @typescript-eslint/no-use-before-define,no-use-before-define */
 import Cookies from 'js-cookie';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useFirstMountState } from '../useFirstMountState';
 import { useMountEffect } from '../useMountEffect';
-import { useSafeState } from '../useSafeState';
 import { useSyncedRef } from '../useSyncedRef';
@@ -77,3 +76,3 @@ import { isBrowser } from "../util/const.js";
     const isFirstMount = useFirstMountState();
-    const [state, setState] = useSafeState(isFirstMount && initializeWithValue ? methods.current.fetchVal() : undefined);
+    const [state, setState] = useState(isFirstMount && initializeWithValue ? methods.current.fetchVal() : undefined);
     useMountEffect(() => {
@@ -80,0 +79,0 @@ if (!initializeWithValue) {

esm/useCustomCompareEffect/index.d.ts

@@ -7,11 +7,12 @@ import { DependencyList } from 'react';
  *
- * @param callback Function that will be passed to underlying effect hook.
- * @param deps Dependencies list, like for `useEffect` hook.
- * @param comparator Function that compares two dependencies arrays, and returns true in case
- * they're equal.
- * @param effectHook Effect hook that will be used to run callback. Must comply `useEffect`
- * signature, meaning that callback should be placed as first argument and dependencies list
- * as second.
- * @param effectHookRestArgs Extra arguments that passed to effectHook.
+ * @param callback Function that will be passed to the underlying effect hook.
+ * @param deps Dependency list like the one passed to `useEffect`.
+ * @param comparator Function that compares two dependency arrays,
+ * and returns `true` if they're equal.
+ * @param effectHook Effect hook that will be used to run
+ * `callback`. Must match the type signature of `useEffect`, meaning that the `callback` should be
+ * placed as the first argument and the dependency list as second.
+ * @param effectHookRestArgs Extra arguments that are passed to the `effectHook`
+ * after the `callback` and the dependency list.
  */
 export declare function useCustomCompareEffect<Callback extends EffectCallback = EffectCallback, Deps extends DependencyList = DependencyList, HookRestArgs extends any[] = any[], R extends HookRestArgs = HookRestArgs>(callback: Callback, deps: Deps, comparator?: DependenciesComparator<Deps>, effectHook?: EffectHook<Callback, Deps, HookRestArgs>, ...effectHookRestArgs: R): void;

esm/useCustomCompareEffect/index.js

@@ -8,14 +8,15 @@ /* eslint-disable @typescript-eslint/no-explicit-any */
  *
- * @param callback Function that will be passed to underlying effect hook.
- * @param deps Dependencies list, like for `useEffect` hook.
- * @param comparator Function that compares two dependencies arrays, and returns true in case
- * they're equal.
- * @param effectHook Effect hook that will be used to run callback. Must comply `useEffect`
- * signature, meaning that callback should be placed as first argument and dependencies list
- * as second.
- * @param effectHookRestArgs Extra arguments that passed to effectHook.
+ * @param callback Function that will be passed to the underlying effect hook.
+ * @param deps Dependency list like the one passed to `useEffect`.
+ * @param comparator Function that compares two dependency arrays,
+ * and returns `true` if they're equal.
+ * @param effectHook Effect hook that will be used to run
+ * `callback`. Must match the type signature of `useEffect`, meaning that the `callback` should be
+ * placed as the first argument and the dependency list as second.
+ * @param effectHookRestArgs Extra arguments that are passed to the `effectHook`
+ * after the `callback` and the dependency list.
  */
 export function useCustomCompareEffect(callback, deps, comparator = basicDepsComparator, effectHook = useEffect, ...effectHookRestArgs) {
     const dependencies = useRef();
-    // Effects not working in SSR environment therefore no sense to invoke comparator
+    // Effects are not run during SSR, therefore, it makes no sense to invoke the comparator
     if (dependencies.current === undefined ||
@@ -22,0 +23,0 @@ (isBrowser && !comparator(dependencies.current, deps))) {

esm/useDebouncedEffect/index.d.ts

 import { DependencyList } from 'react';
 /**
- * Like `useEffect`, but passed function is debounced.
+ * Like `useEffect`, but the passed function is debounced.
  *
  * @param callback Callback like for `useEffect`, but without ability to return
  * a cleanup function.
- * @param deps Dependencies list that will be passed to underlying `useEffect`
- * and `useDebouncedCallback`.
- * @param delay Debounce delay.
- * @param maxWait Maximum amount of milliseconds that function can be delayed
- * before it's force execution. 0 means no max wait.
+ * @param deps Dependency list like the one passed to `useEffect`.
+ * @param delay Debounce delay (in milliseconds).
+ * @param maxWait The maximum time `callback` is allowed to be delayed
+ * before it's invoked. `0` means no max wait.
  */
 export declare function useDebouncedEffect(callback: (...args: any[]) => void, deps: DependencyList, delay: number, maxWait?: number): void;

esm/useDebouncedEffect/index.js

@@ -5,11 +5,10 @@ /* eslint-disable @typescript-eslint/no-explicit-any */
 /**
- * Like `useEffect`, but passed function is debounced.
+ * Like `useEffect`, but the passed function is debounced.
  *
  * @param callback Callback like for `useEffect`, but without ability to return
  * a cleanup function.
- * @param deps Dependencies list that will be passed to underlying `useEffect`
- * and `useDebouncedCallback`.
- * @param delay Debounce delay.
- * @param maxWait Maximum amount of milliseconds that function can be delayed
- * before it's force execution. 0 means no max wait.
+ * @param deps Dependency list like the one passed to `useEffect`.
+ * @param delay Debounce delay (in milliseconds).
+ * @param maxWait The maximum time `callback` is allowed to be delayed
+ * before it's invoked. `0` means no max wait.
  */
@@ -16,0 +15,0 @@ export function useDebouncedEffect(callback, deps, delay, maxWait = 0) {

esm/useDebouncedState/index.d.ts

 import { Dispatch, SetStateAction } from 'react';
 /**
- * Like `useSafeState` but its state setter is debounced.
+ * Like `useState` but its state setter is debounced.
  *
- * @param initialState Initial state to pass to underlying `useSafeState`.
+ * @param initialState Initial state to pass to underlying `useState`.
  * @param delay Debounce delay.
@@ -7,0 +7,0 @@ * @param maxWait Maximum amount of milliseconds that function can be delayed

esm/useDebouncedState/index.js

@@ -0,7 +1,7 @@
+import { useState } from 'react';
 import { useDebouncedCallback } from '../useDebouncedCallback';
-import { useSafeState } from '../useSafeState';
 /**
- * Like `useSafeState` but its state setter is debounced.
+ * Like `useState` but its state setter is debounced.
  *
- * @param initialState Initial state to pass to underlying `useSafeState`.
+ * @param initialState Initial state to pass to underlying `useState`.
  * @param delay Debounce delay.
@@ -12,4 +12,4 @@ * @param maxWait Maximum amount of milliseconds that function can be delayed
 export function useDebouncedState(initialState, delay, maxWait = 0) {
-    const [state, setState] = useSafeState(initialState);
+    const [state, setState] = useState(initialState);
     return [state, useDebouncedCallback(setState, [], delay, maxWait)];
 }

esm/useDeepCompareEffect/index.d.ts

 import { DependencyList } from 'react';
 import { EffectCallback, EffectHook } from '../util/misc';
 /**
- * Like `useEffect` but uses `@react-hookz/deep-equal` comparator function to validate deep
+ * Like `useEffect`, but uses `@react-hookz/deep-equal` comparator function to validate deep
  * dependency changes.
  *
- * @param callback Function that will be passed to underlying effect hook.
- * @param deps Dependencies list, like for `useEffect` hook.
- * @param effectHook Effect hook that will be used to run callback. Must comply `useEffect`
- * signature, meaning that callback should be placed as first argument and dependencies list
- * as second.
- * @param effectHookRestArgs Extra arguments that passed to effectHook.
+ * @param callback Function that will be passed to the underlying effect hook.
+ * @param deps Dependency list like the one passed to `useEffect`.
+ * @param effectHook Effect hook that will be used to run
+ * `callback`. Must match the type signature of `useEffect`, meaning that the `callback` should be
+ * placed as the first argument and the dependency list as second.
+ * @param effectHookRestArgs Extra arguments that are passed to the `effectHook`
+ * after the `callback` and the dependency list.
  */
 export declare function useDeepCompareEffect<Callback extends EffectCallback = EffectCallback, Deps extends DependencyList = DependencyList, HookRestArgs extends any[] = any[], R extends HookRestArgs = HookRestArgs>(callback: Callback, deps: Deps, effectHook?: EffectHook<Callback, Deps, HookRestArgs>, ...effectHookRestArgs: R): void;

esm/useDeepCompareEffect/index.js

@@ -5,11 +5,12 @@ import { useEffect } from 'react';
 /**
- * Like `useEffect` but uses `@react-hookz/deep-equal` comparator function to validate deep
+ * Like `useEffect`, but uses `@react-hookz/deep-equal` comparator function to validate deep
  * dependency changes.
  *
- * @param callback Function that will be passed to underlying effect hook.
- * @param deps Dependencies list, like for `useEffect` hook.
- * @param effectHook Effect hook that will be used to run callback. Must comply `useEffect`
- * signature, meaning that callback should be placed as first argument and dependencies list
- * as second.
- * @param effectHookRestArgs Extra arguments that passed to effectHook.
+ * @param callback Function that will be passed to the underlying effect hook.
+ * @param deps Dependency list like the one passed to `useEffect`.
+ * @param effectHook Effect hook that will be used to run
+ * `callback`. Must match the type signature of `useEffect`, meaning that the `callback` should be
+ * placed as the first argument and the dependency list as second.
+ * @param effectHookRestArgs Extra arguments that are passed to the `effectHook`
+ * after the `callback` and the dependency list.
  */
@@ -16,0 +17,0 @@ export function useDeepCompareEffect(callback, deps, effectHook = useEffect, ...effectHookRestArgs) {

esm/useDocumentVisibility/index.js

@@ -9,4 +9,4 @@ import { useState } from 'react';
  *
- * @param initializeWithValue Whether to initialize state with the cookie value or `undefined`.
- *        _We suggest setting this to `false` during SSR._
+ * @param initializeWithValue Whether to initialize with the document visibility state or
+ * `undefined`. _Set this to `false` during SSR._
  */
@@ -13,0 +13,0 @@ export function useDocumentVisibility(initializeWithValue = true) {

esm/useFirstMountState/index.d.ts

 /**
- * Return boolean that is `true` only on first render.
+ * Returns a boolean that is `true` only on first render.
  */
 export declare function useFirstMountState(): boolean;

esm/useFirstMountState/index.js

 import { useEffect, useRef } from 'react';
 /**
- * Return boolean that is `true` only on first render.
+ * Returns a boolean that is `true` only on first render.
  */
@@ -5,0 +5,0 @@ export function useFirstMountState() {

esm/useFunctionalState/index.js

@@ -1,10 +0,8 @@
-import { useCallback } from 'react';
-import { useSafeState } from '../useSafeState';
+import { useCallback, useState } from 'react';
 import { useSyncedRef } from '../useSyncedRef';
 /**
- * Like `useState` but instead of raw state, state getter returned. `useSafeState` is
- * used underneath.
+ * Like `useState` but instead of raw state, state getter returned.
  */
 export function useFunctionalState(initialState) {
-    const [state, setState] = useSafeState(initialState);
+    const [state, setState] = useState(initialState);
     const stateRef = useSyncedRef(state);
@@ -11,0 +9,0 @@ // eslint-disable-next-line react-hooks/exhaustive-deps

esm/useIntersectionObserver/index.js

@@ -1,3 +0,2 @@
-import { useEffect } from 'react';
-import { useSafeState } from '../useSafeState';
+import { useEffect, useState } from 'react';
 const DEFAULT_THRESHOLD = [0];
@@ -71,3 +70,3 @@ const DEFAULT_ROOT_MARGIN = '0px';
 export function useIntersectionObserver(target, { threshold = DEFAULT_THRESHOLD, root: r, rootMargin = DEFAULT_ROOT_MARGIN, } = {}) {
-    const [state, setState] = useSafeState();
+    const [state, setState] = useState();
     useEffect(() => {
@@ -74,0 +73,0 @@ const tgt = target && 'current' in target ? target.current : target;

esm/useIntervalEffect/index.d.ts

 /**
- * Like `setInterval` but in form of react hook.
+ * Like `setInterval` but in the form of a React hook.
  *
- * @param callback Callback to be called within interval.
- * @param ms Interval delay in milliseconds, `undefined` disables the interval.
- * Keep in mind, that changing this parameter will re-set interval, meaning
- * that it will be set as new after the change.
+ * @param callback Function to call within the interval.
+ * @param ms Delay passed to the underlying `setInterval`. If set to `undefined`, the interval will
+ * be cancelled. Keep in mind, that changing this parameter will reset the interval.
  */
 export declare function useIntervalEffect(callback: () => void, ms?: number): void;

esm/useIntervalEffect/index.js

 import { useEffect } from 'react';
 import { useSyncedRef } from '../useSyncedRef';
 /**
- * Like `setInterval` but in form of react hook.
+ * Like `setInterval` but in the form of a React hook.
  *
- * @param callback Callback to be called within interval.
- * @param ms Interval delay in milliseconds, `undefined` disables the interval.
- * Keep in mind, that changing this parameter will re-set interval, meaning
- * that it will be set as new after the change.
+ * @param callback Function to call within the interval.
+ * @param ms Delay passed to the underlying `setInterval`. If set to `undefined`, the interval will
+ * be cancelled. Keep in mind, that changing this parameter will reset the interval.
  */
@@ -11,0 +10,0 @@ export function useIntervalEffect(callback, ms) {

esm/useIsMounted/index.d.ts

 /**
- * Returns function that yields current mount state.
+ * Returns a function that returns the current mount state. This hook is useful when you have to
+ * detect component mount state within async effects.
  *
- * Returned function yields `true` only in case component is mounted. This hook
- * is handy for the cases when you have to detect component mount state within
- * async effects.
+ * @param initialValue Initial value.
  *
- * @param initialValue Initial value. By default, this hook assumes that hook is
- * not mounted yet at first render.
+ * @return Function that returns `true` only if the component is mounted.
  */
 export declare function useIsMounted(initialValue?: boolean): () => boolean;

esm/useIsMounted/index.js

 import { useCallback, useEffect, useRef } from 'react';
 /**
- * Returns function that yields current mount state.
+ * Returns a function that returns the current mount state. This hook is useful when you have to
+ * detect component mount state within async effects.
  *
- * Returned function yields `true` only in case component is mounted. This hook
- * is handy for the cases when you have to detect component mount state within
- * async effects.
+ * @param initialValue Initial value.
  *
- * @param initialValue Initial value. By default, this hook assumes that hook is
- * not mounted yet at first render.
+ * @return Function that returns `true` only if the component is mounted.
  */
@@ -12,0 +10,0 @@ export function useIsMounted(initialValue = false) {

esm/useMeasure/index.js

@@ -0,5 +1,5 @@
+import { useState } from 'react';
 import { useResizeObserver } from '../useResizeObserver';
 import { useHookableRef } from '../useHookableRef';
 import { useRafCallback } from '../useRafCallback';
-import { useSafeState } from '../useSafeState';
 /**
@@ -11,3 +11,3 @@ * Uses ResizeObserver to track element dimensions and re-render component when they change.
 export function useMeasure(enabled = true) {
-    const [element, setElement] = useSafeState(null);
+    const [element, setElement] = useState(null);
     const elementRef = useHookableRef(null, (v) => {
@@ -17,3 +17,3 @@ setElement(v);
     });
-    const [measures, setMeasures] = useSafeState();
+    const [measures, setMeasures] = useState();
     const [observerHandler] = useRafCallback((entry) => setMeasures({ width: entry.contentRect.width, height: entry.contentRect.height }));
@@ -20,0 +20,0 @@ useResizeObserver(element, observerHandler, enabled);

esm/useMediatedState/index.js

@@ -1,3 +0,2 @@
-import { useCallback } from 'react';
-import { useSafeState } from '../useSafeState';
+import { useCallback, useState } from 'react';
 import { useSyncedRef } from '../useSyncedRef';
@@ -9,3 +8,3 @@ import { resolveHookState } from "../util/resolveHookState.js";
 export function useMediatedState(initialState, mediator) {
-    const [state, setState] = useSafeState(() => {
+    const [state, setState] = useState(() => {
         return mediator ? mediator(resolveHookState(initialState)) : initialState;
@@ -12,0 +11,0 @@ });

esm/useNetworkState/index.js

@@ -1,4 +0,3 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { isBrowser } from "../util/const.js";
-import { useSafeState } from '../useSafeState';
 import { off, on } from "../util/misc.js";
@@ -26,3 +25,3 @@ const navigator = isBrowser ? window.navigator : undefined;
 export function useNetworkState(initialState) {
-    const [state, setState] = useSafeState(initialState ?? getConnectionState);
+    const [state, setState] = useState(initialState ?? getConnectionState);
     useEffect(() => {
@@ -29,0 +28,0 @@ const handleStateChange = () => {

esm/usePermission/index.js

@@ -1,3 +0,2 @@
-import { useEffect } from 'react';
-import { useSafeState } from '../useSafeState';
+import { useEffect, useState } from 'react';
 import { off, on } from "../util/misc.js";
@@ -10,3 +9,3 @@ /**
 export function usePermission(descriptor) {
-    const [state, setState] = useSafeState('not-requested');
+    const [state, setState] = useState('not-requested');
     useEffect(() => {
@@ -13,0 +12,0 @@ const unmount = { current: null };

esm/useRafState/index.js

@@ -0,3 +1,3 @@
+import { useState } from 'react';
 import { useRafCallback } from '../useRafCallback';
-import { useSafeState } from '../useSafeState';
 import { useUnmountEffect } from '../useUnmountEffect';
@@ -8,3 +8,3 @@ /**
 export function useRafState(initialState) {
-    const [state, innerSetState] = useSafeState(initialState);
+    const [state, innerSetState] = useState(initialState);
     const [setState, cancelRaf] = useRafCallback(innerSetState);
@@ -11,0 +11,0 @@ useUnmountEffect(cancelRaf);

esm/useRerender/index.js

@@ -1,3 +0,2 @@
-import { useCallback } from 'react';
-import { useSafeState } from '../useSafeState';
+import { useCallback, useState } from 'react';
 const stateChanger = (state) => (state + 1) % Number.MAX_SAFE_INTEGER;
@@ -8,3 +7,3 @@ /**
 export function useRerender() {
-    const [, setState] = useSafeState(0);
+    const [, setState] = useState(0);
     return useCallback(() => {
@@ -11,0 +10,0 @@ setState(stateChanger);

esm/useStorageValue/index.d.ts

@@ -23,5 +23,5 @@ import { NextState } from '../util/resolveHookState';
      */
-    stringify?: (data: unknown) => string | null;
+    stringify?: (data: T) => string | null;
 }
-type UseStorageValueValue<Type, Default extends Type = Type, Initialize extends boolean | undefined = boolean | undefined, N = Default extends null | undefined ? null | Type : Type, U = Initialize extends false | undefined ? undefined | N : N> = U;
+type UseStorageValueValue<Type, Default extends Type = Type, Initialize extends boolean | undefined = boolean | undefined, N = Default extends null | undefined ? null | Type : Type, U = Initialize extends false ? undefined | N : N> = U;
 export interface UseStorageValueResult<Type, Default extends Type = Type, Initialize extends boolean | undefined = boolean | undefined> {
@@ -28,0 +28,0 @@ value: UseStorageValueValue<Type, Default, Initialize>;

esm/useThrottledState/index.d.ts

 import { Dispatch, SetStateAction } from 'react';
 /**
- * Like `useSafeState` but its state setter is throttled.
+ * Like `useState` but its state setter is throttled.
  *
- * @param initialState Initial state to pass to underlying `useSafeState`.
+ * @param initialState Initial state to pass to underlying `useState`.
  * @param delay Throttle delay.
@@ -7,0 +7,0 @@ * @param noTrailing If `noTrailing` is true, callback will only execute every

esm/useThrottledState/index.js

@@ -1,7 +0,7 @@
-import { useSafeState } from '../useSafeState';
+import { useState } from 'react';
 import { useThrottledCallback } from '../useThrottledCallback';
 /**
- * Like `useSafeState` but its state setter is throttled.
+ * Like `useState` but its state setter is throttled.
  *
- * @param initialState Initial state to pass to underlying `useSafeState`.
+ * @param initialState Initial state to pass to underlying `useState`.
  * @param delay Throttle delay.
@@ -13,4 +13,4 @@ * @param noTrailing If `noTrailing` is true, callback will only execute every
 export function useThrottledState(initialState, delay, noTrailing = false) {
-    const [state, setState] = useSafeState(initialState);
+    const [state, setState] = useState(initialState);
     return [state, useThrottledCallback(setState, [], delay, noTrailing)];
 }

esm/useToggle/index.js

@@ -1,7 +0,6 @@
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import { useSyncedRef } from '../useSyncedRef';
-import { useSafeState } from '../useSafeState';
 import { resolveHookState } from "../util/resolveHookState.js";
 /**
- * Like `useSafeState`, but can only become `true` or `false`.
+ * Like `useState`, but can only become `true` or `false`.
  *
@@ -17,3 +16,3 @@ * State setter, in case called without arguments, will change the state to opposite. React
     // toggle logic.
-    const [state, setState] = useSafeState(initialState);
+    const [state, setState] = useState(initialState);
     const ignoreReactEventsRef = useSyncedRef(ignoreReactEvents);
@@ -20,0 +19,0 @@ return [

esm/useValidator/index.js

@@ -1,3 +0,2 @@
-import { useCallback, useEffect } from 'react';
-import { useSafeState } from '../useSafeState';
+import { useCallback, useEffect, useState } from 'react';
 import { useSyncedRef } from '../useSyncedRef';
@@ -12,3 +11,3 @@ /**
 export function useValidator(validator, deps, initialValidity = { isValid: undefined }) {
-    const [validity, setValidity] = useSafeState(initialValidity);
+    const [validity, setValidity] = useState(initialValidity);
     const validatorRef = useSyncedRef(() => {
@@ -15,0 +14,0 @@ if (validator.length) {

package.json

 {
   "name": "@react-hookz/web",
-  "version": "22.0.0",
+  "version": "23.0.0",
   "description": "React hooks done right, for browser and SSR.",
@@ -79,6 +79,6 @@ "keywords": [
   "devDependencies": {
-    "@babel/core": "^7.20.12",
-    "@commitlint/cli": "^17.2.0",
-    "@commitlint/config-conventional": "^17.4.0",
-    "@commitlint/cz-commitlint": "^17.4.0",
+    "@babel/core": "^7.21.3",
+    "@commitlint/cli": "^17.4.4",
+    "@commitlint/config-conventional": "^17.4.4",
+    "@commitlint/cz-commitlint": "^17.5.0",
     "@jamesacarr/jest-reporter-github-actions": "^0.0.4",
@@ -91,37 +91,37 @@ "@react-hookz/eslint-config": "^1.7.6",
     "@storybook/addon-docs": "^6.5.15",
-    "@storybook/addon-essentials": "^6.5.15",
-    "@storybook/addon-links": "^6.5.15",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-links": "^6.5.16",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addons": "^6.5.14",
-    "@storybook/builder-webpack5": "^6.5.15",
-    "@storybook/manager-webpack5": "^6.5.15",
-    "@storybook/react": "^6.5.15",
+    "@storybook/addons": "^6.5.16",
+    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/react": "^6.5.16",
     "@storybook/storybook-deployer": "^2.8.16",
-    "@storybook/theming": "^6.5.14",
-    "@swc/core": "^1.3.24",
+    "@storybook/theming": "^6.5.16",
+    "@swc/core": "^1.3.42",
     "@swc/jest": "^0.2.24",
     "@testing-library/react-hooks": "^8.0.1",
-    "@types/jest": "^29.2.5",
-    "@types/js-cookie": "^3.0.2",
+    "@types/jest": "^29.5.0",
+    "@types/js-cookie": "^3.0.3",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
     "babel-loader": "^9.1.2",
-    "commitizen": "^4.2.6",
-    "commitlint": "^17.4.0",
+    "commitizen": "^4.3.0",
+    "commitlint": "^17.5.0",
     "concurrently": "^7.6.0",
     "husky": "^8.0.3",
-    "jest": "^29.3.1",
-    "jest-environment-jsdom": "^29.3.1",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
     "js-cookie": "^3.0.1",
-    "lint-staged": "^13.1.0",
-    "prettier": "^2.8.1",
+    "lint-staged": "^13.2.0",
+    "prettier": "^2.8.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "rimraf": "^3.0.2",
-    "semantic-release": "^19.0.5",
+    "rimraf": "^4.4.1",
+    "semantic-release": "^20.1.3",
     "ts-node": "^10.9.1",
     "ttypescript": "^1.5.15",
-    "typescript": "^4.9.4",
+    "typescript": "^4.9.5",
     "yarn": "^1.22.19"
   }
 }

README.md

@@ -121,3 +121,3 @@ <div align="center">
   - [**`useDebouncedState`**](https://react-hookz.github.io/web/?path=/docs/state-usedebouncedstate--example)
-    — Like `useSafeState` but its state setter is debounced.
+    — Like `useState` but its state setter is debounced.
   - [**`useFunctionalState`**](https://react-hookz.github.io/web/?path=/docs/state-usefunctionalstate--page)
@@ -141,4 +141,2 @@ — Like `useState` but instead of raw state, a state getter function is returned.
     Tracks component's render count including first render.
-  - [**`useSafeState`**](https://react-hookz.github.io/web/?path=/docs/state-usesafestate--page) —
-    Like `useState`, but its state setter is guarded against setting the state of an unmounted component.
   - [**`useSet`**](https://react-hookz.github.io/web/?path=/docs/state-useset--example) — Tracks the
@@ -149,3 +147,3 @@ state of a `Set`.
   - [**`useThrottledState`**](https://react-hookz.github.io/web/?path=/docs/state-usethrottledstate--example)
-    — Like `useSafeState` but its state setter is throttled.
+    — Like `useState` but its state setter is throttled.
   - [**`useValidator`**](https://react-hookz.github.io/web/?path=/docs/state-usevalidator--example)
@@ -264,2 +262,9 @@ — Performs validation when any of the provided dependencies change.
     <td align="center">
+        <a href="https://github.com/wesgro">
+            <img src="https://avatars.githubusercontent.com/u/595567?v=4" width="100;" alt="wesgro"/>
+            <br />
+            <sub><b>Jake Ketcheson</b></sub>
+        </a>
+    </td>
+    <td align="center">
         <a href="https://github.com/axelboc">
@@ -270,3 +275,4 @@ <img src="https://avatars.githubusercontent.com/u/2936402?v=4" width="100;" alt="axelboc"/>
         </a>
-    </td>
+    </td></tr>
+<tr>
     <td align="center">
@@ -278,4 +284,3 @@ <a href="https://github.com/lensbart">
         </a>
-    </td></tr>
-<tr>
+    </td>
     <td align="center">
@@ -310,9 +315,2 @@ <a href="https://github.com/birant">
     <td align="center">
-        <a href="https://github.com/wesgro">
-            <img src="https://avatars.githubusercontent.com/u/595567?v=4" width="100;" alt="wesgro"/>
-            <br />
-            <sub><b>Jake Ketcheson</b></sub>
-        </a>
-    </td>
-    <td align="center">
         <a href="https://github.com/JoshuaStewartEntelect">
@@ -319,0 +317,0 @@ <img src="https://avatars.githubusercontent.com/u/92043787?v=4" width="100;" alt="JoshuaStewartEntelect"/>

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

285082

decreased by-0.99%

Number of package files

255

decreased by-1.54%

Lines of code

6355

decreased by-1.24%

Number of lines in readme file

353

decreased by-0.56%

No dependency changes