react-simplikit 0.0.38 → 0.0.40

package/dist/components/ImpressionArea/index.d.cts

@@ -42,6 +42,6 @@ type Props<Tag extends ElementType> = React.ComponentPropsWithoutRef<Tag> & UseI
  */
 declare const ImpressionArea: <T extends ElementType = "div">(props: Props<T> & {
     ref?: Ref<Element<T>>;
-}) => React.ReactNode;
+}) => React.ReactElement;
 
 export { ImpressionArea };

package/dist/hooks/useConditionalEffect/index.cjs

@@ -0,0 +1,50 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/hooks/useConditionalEffect/index.ts
+var useConditionalEffect_exports = {};
+__export(useConditionalEffect_exports, {
+  useConditionalEffect: () => useConditionalEffect
+});
+module.exports = __toCommonJS(useConditionalEffect_exports);
+
+// src/hooks/useConditionalEffect/useConditionalEffect.ts
+var import_react = require("react");
+function useConditionalEffect(effect, deps, condition) {
+  const prevDepsRef = (0, import_react.useRef)(void 0);
+  const memoizedCondition = (0, import_react.useCallback)(condition, deps);
+  if (deps.length === 0) {
+    console.warn(
+      "useConditionalEffect received an empty dependency array. This may indicate missing dependencies and could lead to unexpected behavior."
+    );
+  }
+  const shouldRun = memoizedCondition(prevDepsRef.current, deps);
+  (0, import_react.useEffect)(() => {
+    if (shouldRun) {
+      const cleanup = effect();
+      prevDepsRef.current = deps;
+      return cleanup;
+    }
+    prevDepsRef.current = deps;
+  }, deps);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useConditionalEffect
+});

package/dist/hooks/useConditionalEffect/index.d.cts

@@ -0,0 +1,43 @@
+import { DependencyList, EffectCallback } from 'react';
+
+/**
+ * @description
+ * `useConditionalEffect` is a React hook that conditionally executes effects based on a predicate function.
+ * This provides more control over when effects run beyond just dependency changes.
+ *
+ * @param {EffectCallback} effect - The effect callback to run.
+ * @param {DependencyList} deps - Dependencies array, similar to useEffect.
+ * @param {(prevDeps: T | undefined, currentDeps: T) => boolean} condition - Function that determines if the effect should run based on previous and current deps.
+ * - On the initial render, `prevDeps` will be `undefined`. Your `condition` function should handle this case.
+ * - If you want your effect to run on the initial render, return `true` when `prevDeps` is `undefined`.
+ * - If you don't want your effect to run on the initial render, return `false` when `prevDeps` is `undefined`.
+ *
+ * @example
+ * import { useConditionalEffect } from 'react-simplikit';
+ *
+ * function Component() {
+ *   const [count, setCount] = useState(0);
+ *
+ *   // Only run effect when count increases
+ *   useConditionalEffect(
+ *     () => {
+ *       console.log(`Count increased to ${count}`);
+ *     },
+ *     [count],
+ *     (prevDeps, currentDeps) => {
+ *       // Only run when count is defined and has increased
+ *       return prevDeps && currentDeps[0] > prevDeps[0];
+ *     }
+ *   );
+ *
+ *   return (
+ *     <button onClick={() => setCount(prev => prev + 1)}>
+ *       Increment: {count}
+ *     </button>
+ *   );
+ * }
+ *
+ */
+declare function useConditionalEffect<T extends DependencyList>(effect: EffectCallback, deps: T, condition: (prevDeps: T | undefined, currentDeps: T) => boolean): void;
+
+export { useConditionalEffect };

package/dist/index.cjs

@@ -29,6 +29,7 @@ __export(index_exports, {
   useAsyncEffect: () => useAsyncEffect,
   useBooleanState: () => useBooleanState,
   useCallbackOncePerRender: () => useCallbackOncePerRender,
+  useConditionalEffect: () => useConditionalEffect,
   useControlledState: () => useControlledState,
   useCounter: () => useCounter,
   useDebounce: () => useDebounce,
@@ -381,18 +382,39 @@ function useCallbackOncePerRender(callback, deps) {
   });
 }
 
-// src/hooks/useControlledState/useControlledState.ts
+// src/hooks/useConditionalEffect/useConditionalEffect.ts
 var import_react12 = require("react");
+function useConditionalEffect(effect, deps, condition) {
+  const prevDepsRef = (0, import_react12.useRef)(void 0);
+  const memoizedCondition = (0, import_react12.useCallback)(condition, deps);
+  if (deps.length === 0) {
+    console.warn(
+      "useConditionalEffect received an empty dependency array. This may indicate missing dependencies and could lead to unexpected behavior."
+    );
+  }
+  const shouldRun = memoizedCondition(prevDepsRef.current, deps);
+  (0, import_react12.useEffect)(() => {
+    if (shouldRun) {
+      const cleanup = effect();
+      prevDepsRef.current = deps;
+      return cleanup;
+    }
+    prevDepsRef.current = deps;
+  }, deps);
+}
+
+// src/hooks/useControlledState/useControlledState.ts
+var import_react13 = require("react");
 function useControlledState({
   value: valueProp,
   defaultValue,
   onChange,
   equalityFn = Object.is
 }) {
-  const [uncontrolledState, setUncontrolledState] = (0, import_react12.useState)(defaultValue);
+  const [uncontrolledState, setUncontrolledState] = (0, import_react13.useState)(defaultValue);
   const controlled = valueProp !== void 0;
   const value = controlled ? valueProp : uncontrolledState;
-  const setValue = (0, import_react12.useCallback)(
+  const setValue = (0, import_react13.useCallback)(
     (next) => {
       const nextValue = isSetStateAction(next) ? next(value) : next;
       if (equalityFn(value, nextValue) === true) return;
@@ -409,7 +431,7 @@ function isSetStateAction(next) {
 }
 
 // src/hooks/useCounter/useCounter.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 function useCounter(initialValue = 0, { min, max, step = 1 } = {}) {
   const validateValue = (value) => {
     let validatedValue = value;
@@ -421,9 +443,9 @@ function useCounter(initialValue = 0, { min, max, step = 1 } = {}) {
     }
     return validatedValue;
   };
-  const [count, setCountState] = (0, import_react13.useState)(() => validateValue(initialValue));
-  const validateValueMemoized = (0, import_react13.useCallback)(validateValue, [min, max]);
-  const setCount = (0, import_react13.useCallback)(
+  const [count, setCountState] = (0, import_react14.useState)(() => validateValue(initialValue));
+  const validateValueMemoized = (0, import_react14.useCallback)(validateValue, [min, max]);
+  const setCount = (0, import_react14.useCallback)(
     (value) => {
       setCountState((prev) => {
         const nextValue = typeof value === "function" ? value(prev) : value;
@@ -432,13 +454,13 @@ function useCounter(initialValue = 0, { min, max, step = 1 } = {}) {
     },
     [validateValueMemoized]
   );
-  const increment = (0, import_react13.useCallback)(() => {
+  const increment = (0, import_react14.useCallback)(() => {
     setCount((prev) => prev + step);
   }, [setCount, step]);
-  const decrement = (0, import_react13.useCallback)(() => {
+  const decrement = (0, import_react14.useCallback)(() => {
     setCount((prev) => prev - step);
   }, [setCount, step]);
-  const reset = (0, import_react13.useCallback)(() => {
+  const reset = (0, import_react14.useCallback)(() => {
     setCount(initialValue);
   }, [setCount, initialValue]);
   return {
@@ -451,12 +473,12 @@ function useCounter(initialValue = 0, { min, max, step = 1 } = {}) {
 }
 
 // src/hooks/useDebounce/useDebounce.ts
-var import_react14 = require("react");
 var import_react15 = require("react");
+var import_react16 = require("react");
 function useDebounce(callback, wait, options = {}) {
   const preservedCallback = usePreservedCallback(callback);
   const { leading = false, trailing = true } = options;
-  const edges = (0, import_react15.useMemo)(() => {
+  const edges = (0, import_react16.useMemo)(() => {
     const _edges = [];
     if (leading) {
       _edges.push("leading");
@@ -466,10 +488,10 @@ function useDebounce(callback, wait, options = {}) {
     }
     return _edges;
   }, [leading, trailing]);
-  const debounced = (0, import_react15.useMemo)(() => {
+  const debounced = (0, import_react16.useMemo)(() => {
     return debounce(preservedCallback, wait, { edges });
   }, [preservedCallback, wait, edges]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     return () => {
       debounced.cancel();
     };
@@ -478,21 +500,21 @@ function useDebounce(callback, wait, options = {}) {
 }
 
 // src/hooks/useDoubleClick/useDoubleClick.ts
-var import_react16 = require("react");
+var import_react17 = require("react");
 function useDoubleClick({
   delay = 250,
   click,
   doubleClick
 }) {
-  const clickTimeout = (0, import_react16.useRef)(null);
+  const clickTimeout = (0, import_react17.useRef)(null);
   const clearClickTimeout = usePreservedCallback(() => {
     if (clickTimeout.current != null) {
       window.clearTimeout(clickTimeout.current);
       clickTimeout.current = null;
     }
   });
-  (0, import_react16.useEffect)(() => () => clearClickTimeout(), [clearClickTimeout]);
-  const handleEvent = (0, import_react16.useCallback)(
+  (0, import_react17.useEffect)(() => () => clearClickTimeout(), [clearClickTimeout]);
+  const handleEvent = (0, import_react17.useCallback)(
     (event) => {
       clearClickTimeout();
       if (click && event.detail === 1) {
@@ -510,7 +532,7 @@ function useDoubleClick({
 }
 
 // src/hooks/useGeolocation/useGeolocation.ts
-var import_react17 = require("react");
+var import_react18 = require("react");
 var CustomGeoLocationError = class extends Error {
   code;
   constructor({ code, message }) {
@@ -524,14 +546,14 @@ var GeolocationMountBehavior = {
   WATCH: "watch"
 };
 function useGeolocation(options) {
-  const [state, setState] = (0, import_react17.useState)({
+  const [state, setState] = (0, import_react18.useState)({
     loading: !!options?.mountBehavior,
     error: null,
     data: null
   });
-  const [isTracking, setIsTracking] = (0, import_react17.useState)(false);
-  const watchIdRef = (0, import_react17.useRef)(null);
-  const checkGeolocationSupport = (0, import_react17.useCallback)(() => {
+  const [isTracking, setIsTracking] = (0, import_react18.useState)(false);
+  const watchIdRef = (0, import_react18.useRef)(null);
+  const checkGeolocationSupport = (0, import_react18.useCallback)(() => {
     if (typeof window === "undefined" || navigator.geolocation === void 0) {
       setState((prev) => ({
         ...prev,
@@ -545,7 +567,7 @@ function useGeolocation(options) {
     }
     return true;
   }, []);
-  const handleSuccess = (0, import_react17.useCallback)((position) => {
+  const handleSuccess = (0, import_react18.useCallback)((position) => {
     const { coords } = position;
     setState((prev) => ({
       ...prev,
@@ -563,7 +585,7 @@ function useGeolocation(options) {
       }
     }));
   }, []);
-  const handleError = (0, import_react17.useCallback)((error) => {
+  const handleError = (0, import_react18.useCallback)((error) => {
     const { code, message } = error;
     setState((prev) => ({
       ...prev,
@@ -571,7 +593,7 @@ function useGeolocation(options) {
       error: new CustomGeoLocationError({ code, message })
     }));
   }, []);
-  const getGeolocationOptions = (0, import_react17.useCallback)(
+  const getGeolocationOptions = (0, import_react18.useCallback)(
     () => ({
       enableHighAccuracy: options?.enableHighAccuracy,
       maximumAge: options?.maximumAge,
@@ -579,14 +601,14 @@ function useGeolocation(options) {
     }),
     [options?.enableHighAccuracy, options?.maximumAge, options?.timeout]
   );
-  const getCurrentPosition = (0, import_react17.useCallback)(() => {
+  const getCurrentPosition = (0, import_react18.useCallback)(() => {
     if (!checkGeolocationSupport()) {
       return;
     }
     setState((prev) => ({ ...prev, loading: true }));
     navigator.geolocation.getCurrentPosition(handleSuccess, handleError, getGeolocationOptions());
   }, [handleSuccess, handleError, getGeolocationOptions, checkGeolocationSupport]);
-  const startTracking = (0, import_react17.useCallback)(() => {
+  const startTracking = (0, import_react18.useCallback)(() => {
     if (!checkGeolocationSupport()) {
       return;
     }
@@ -603,7 +625,7 @@ function useGeolocation(options) {
       getGeolocationOptions()
     );
   }, [handleSuccess, handleError, getGeolocationOptions, checkGeolocationSupport]);
-  const stopTracking = (0, import_react17.useCallback)(() => {
+  const stopTracking = (0, import_react18.useCallback)(() => {
     if (watchIdRef.current === null) {
       return;
     }
@@ -611,7 +633,7 @@ function useGeolocation(options) {
     watchIdRef.current = null;
     setIsTracking(false);
   }, []);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (options?.mountBehavior === GeolocationMountBehavior.WATCH) {
       startTracking();
     } else if (options?.mountBehavior === GeolocationMountBehavior.GET) {
@@ -634,10 +656,10 @@ function useGeolocation(options) {
 }
 
 // src/hooks/useInputState/useInputState.ts
-var import_react18 = require("react");
+var import_react19 = require("react");
 function useInputState(initialValue = "", transformValue = echo) {
-  const [value, setValue] = (0, import_react18.useState)(initialValue);
-  const handleValueChange = (0, import_react18.useCallback)(
+  const [value, setValue] = (0, import_react19.useState)(initialValue);
+  const handleValueChange = (0, import_react19.useCallback)(
     ({ target: { value: value2 } }) => {
       setValue(transformValue(value2));
     },
@@ -650,18 +672,18 @@ function echo(v) {
 }
 
 // src/hooks/useInterval/useInterval.ts
-var import_react19 = require("react");
+var import_react20 = require("react");
 function useInterval(callback, options) {
   const delay = typeof options === "number" ? options : options.delay;
   const immediate = typeof options === "number" ? false : options.immediate;
   const enabled = typeof options === "number" ? true : options.enabled ?? true;
   const preservedCallback = usePreservedCallback(callback);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (immediate === true && enabled) {
       preservedCallback();
     }
   }, [immediate, preservedCallback, enabled]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (!enabled) {
       return;
     }
@@ -671,16 +693,16 @@ function useInterval(callback, options) {
 }
 
 // src/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts
-var import_react20 = require("react");
+var import_react21 = require("react");
 var isServer = typeof window === "undefined";
-var useIsomorphicLayoutEffect = isServer ? import_react20.useEffect : import_react20.useLayoutEffect;
+var useIsomorphicLayoutEffect = isServer ? import_react21.useEffect : import_react21.useLayoutEffect;
 
 // src/hooks/useLoading/useLoading.ts
-var import_react21 = require("react");
+var import_react22 = require("react");
 function useLoading() {
-  const [loading, setLoading] = (0, import_react21.useState)(false);
+  const [loading, setLoading] = (0, import_react22.useState)(false);
   const ref = useIsMountedRef();
-  const startTransition = (0, import_react21.useCallback)(
+  const startTransition = (0, import_react22.useCallback)(
     async (promise) => {
       try {
         setLoading(true);
@@ -694,11 +716,11 @@ function useLoading() {
     },
     [ref.isMounted]
   );
-  return (0, import_react21.useMemo)(() => [loading, startTransition], [loading, startTransition]);
+  return (0, import_react22.useMemo)(() => [loading, startTransition], [loading, startTransition]);
 }
 function useIsMountedRef() {
-  const ref = (0, import_react21.useRef)({ isMounted: true }).current;
-  (0, import_react21.useEffect)(() => {
+  const ref = (0, import_react22.useRef)({ isMounted: true }).current;
+  (0, import_react22.useEffect)(() => {
     ref.isMounted = true;
     return () => {
       ref.isMounted = false;
@@ -708,18 +730,18 @@ function useIsMountedRef() {
 }
 
 // src/hooks/useLongPress/useLongPress.ts
-var import_react22 = require("react");
+var import_react23 = require("react");
 function useLongPress(onLongPress, { delay = 500, moveThreshold, onClick, onLongPressEnd } = {}) {
-  const timeoutRef = (0, import_react22.useRef)(null);
-  const isLongPressActiveRef = (0, import_react22.useRef)(false);
-  const initialPositionRef = (0, import_react22.useRef)({ x: 0, y: 0 });
+  const timeoutRef = (0, import_react23.useRef)(null);
+  const isLongPressActiveRef = (0, import_react23.useRef)(false);
+  const initialPositionRef = (0, import_react23.useRef)({ x: 0, y: 0 });
   const preservedOnLongPress = usePreservedCallback(onLongPress);
   const preservedOnClick = usePreservedCallback(onClick || (() => {
   }));
   const preservedOnLongPressEnd = usePreservedCallback(onLongPressEnd || (() => {
   }));
   const hasThreshold = moveThreshold?.x !== void 0 || moveThreshold?.y !== void 0;
-  const getClientPosition = (0, import_react22.useCallback)((event) => {
+  const getClientPosition = (0, import_react23.useCallback)((event) => {
     if ("touches" in event.nativeEvent) {
       const touch = event.nativeEvent.touches[0];
       return { x: touch.clientX, y: touch.clientY };
@@ -729,7 +751,7 @@ function useLongPress(onLongPress, { delay = 500, moveThreshold, onClick, onLong
       y: event.nativeEvent.clientY
     };
   }, []);
-  const isMovedBeyondThreshold = (0, import_react22.useCallback)(
+  const isMovedBeyondThreshold = (0, import_react23.useCallback)(
     (event) => {
       const { x, y } = getClientPosition(event);
       const deltaX = Math.abs(x - initialPositionRef.current.x);
@@ -738,13 +760,13 @@ function useLongPress(onLongPress, { delay = 500, moveThreshold, onClick, onLong
     },
     [getClientPosition, moveThreshold]
   );
-  const cancelLongPress = (0, import_react22.useCallback)(() => {
+  const cancelLongPress = (0, import_react23.useCallback)(() => {
     if (timeoutRef.current !== null) {
       window.clearTimeout(timeoutRef.current);
       timeoutRef.current = null;
     }
   }, []);
-  const handlePressStart = (0, import_react22.useCallback)(
+  const handlePressStart = (0, import_react23.useCallback)(
     (event) => {
       cancelLongPress();
       const position = getClientPosition(event);
@@ -757,7 +779,7 @@ function useLongPress(onLongPress, { delay = 500, moveThreshold, onClick, onLong
     },
     [cancelLongPress, delay, getClientPosition, preservedOnLongPress]
   );
-  const handlePressEnd = (0, import_react22.useCallback)(
+  const handlePressEnd = (0, import_react23.useCallback)(
     (event) => {
       if (isLongPressActiveRef.current) {
         preservedOnLongPressEnd(event);
@@ -769,7 +791,7 @@ function useLongPress(onLongPress, { delay = 500, moveThreshold, onClick, onLong
     },
     [cancelLongPress, preservedOnClick, preservedOnLongPressEnd]
   );
-  const handlePressMove = (0, import_react22.useCallback)(
+  const handlePressMove = (0, import_react23.useCallback)(
     (event) => {
       if (timeoutRef.current !== null && isMovedBeyondThreshold(event)) {
         cancelLongPress();
@@ -788,13 +810,13 @@ function useLongPress(onLongPress, { delay = 500, moveThreshold, onClick, onLong
 }
 
 // src/hooks/useMap/useMap.ts
-var import_react24 = require("react");
+var import_react25 = require("react");
 
 // src/hooks/usePreservedReference/usePreservedReference.ts
-var import_react23 = require("react");
+var import_react24 = require("react");
 function usePreservedReference(value, areValuesEqual = areDeeplyEqual) {
-  const ref = (0, import_react23.useRef)(value);
-  return (0, import_react23.useMemo)(() => {
+  const ref = (0, import_react24.useRef)(value);
+  return (0, import_react24.useMemo)(() => {
     if (!areValuesEqual(ref.current, value)) {
       ref.current = value;
     }
@@ -807,38 +829,38 @@ function areDeeplyEqual(x, y) {
 
 // src/hooks/useMap/useMap.ts
 function useMap(initialState = /* @__PURE__ */ new Map()) {
-  const [map, setMap] = (0, import_react24.useState)(() => new Map(initialState));
+  const [map, setMap] = (0, import_react25.useState)(() => new Map(initialState));
   const preservedInitialState = usePreservedReference(initialState);
-  const set = (0, import_react24.useCallback)((key, value) => {
+  const set = (0, import_react25.useCallback)((key, value) => {
     setMap((prev) => {
       const nextMap = new Map(prev);
       nextMap.set(key, value);
       return nextMap;
     });
   }, []);
-  const setAll = (0, import_react24.useCallback)((entries) => {
+  const setAll = (0, import_react25.useCallback)((entries) => {
     setMap(() => new Map(entries));
   }, []);
-  const remove = (0, import_react24.useCallback)((key) => {
+  const remove = (0, import_react25.useCallback)((key) => {
     setMap((prev) => {
       const nextMap = new Map(prev);
       nextMap.delete(key);
       return nextMap;
     });
   }, []);
-  const reset = (0, import_react24.useCallback)(() => {
+  const reset = (0, import_react25.useCallback)(() => {
     setMap(() => new Map(preservedInitialState));
   }, [preservedInitialState]);
-  const actions = (0, import_react24.useMemo)(() => {
+  const actions = (0, import_react25.useMemo)(() => {
     return { set, setAll, remove, reset };
   }, [set, setAll, remove, reset]);
   return [map, actions];
 }
 
 // src/hooks/useOutsideClickEffect/useOutsideClickEffect.ts
-var import_react25 = require("react");
+var import_react26 = require("react");
 function useOutsideClickEffect(container, callback) {
-  const containers = (0, import_react25.useRef)([]);
+  const containers = (0, import_react26.useRef)([]);
   const handleDocumentClick = usePreservedCallback(({ target }) => {
     if (target === null) {
       return;
@@ -851,10 +873,10 @@ function useOutsideClickEffect(container, callback) {
     }
     callback();
   });
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     containers.current = [container].flat(1).filter((item) => item != null);
   }, [container]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     document.addEventListener("click", handleDocumentClick);
     return () => {
       document.removeEventListener("click", handleDocumentClick);
@@ -863,12 +885,12 @@ function useOutsideClickEffect(container, callback) {
 }
 
 // src/hooks/usePrevious/usePrevious.ts
-var import_react26 = require("react");
+var import_react27 = require("react");
 var strictEquals = (prev, next) => prev === next;
 function usePrevious(state, compare = strictEquals) {
-  const prevRef = (0, import_react26.useRef)(state);
-  const currentRef = (0, import_react26.useRef)(state);
-  const isFirstRender = (0, import_react26.useRef)(true);
+  const prevRef = (0, import_react27.useRef)(state);
+  const currentRef = (0, import_react27.useRef)(state);
+  const isFirstRender = (0, import_react27.useRef)(true);
   if (isFirstRender.current) {
     isFirstRender.current = false;
     return prevRef.current;
@@ -881,7 +903,7 @@ function usePrevious(state, compare = strictEquals) {
 }
 
 // src/hooks/useStorageState/useStorageState.ts
-var import_react27 = require("react");
+var import_react28 = require("react");
 
 // src/hooks/useStorageState/storage.ts
 var MemoStorage = class {
@@ -993,11 +1015,11 @@ function useStorageState(key, {
   ...options
 } = {}) {
   const serializedDefaultValue = defaultValue;
-  const cache = (0, import_react27.useRef)({
+  const cache = (0, import_react28.useRef)({
     data: null,
     parsed: serializedDefaultValue
   });
-  const getSnapshot = (0, import_react27.useCallback)(() => {
+  const getSnapshot = (0, import_react28.useCallback)(() => {
     const deserializer = "deserializer" in options ? options.deserializer : JSON.parse;
     const data = storage.get(key);
     if (data !== cache.current.data) {
@@ -1010,7 +1032,7 @@ function useStorageState(key, {
     }
     return cache.current.parsed;
   }, [defaultValue, key, storage]);
-  const storageState = (0, import_react27.useSyncExternalStore)(
+  const storageState = (0, import_react28.useSyncExternalStore)(
     (onStoreChange) => {
       listeners.add(onStoreChange);
       const handler = (event) => {
@@ -1027,7 +1049,7 @@ function useStorageState(key, {
     () => getSnapshot(),
     () => serializedDefaultValue
   );
-  const setStorageState = (0, import_react27.useCallback)(
+  const setStorageState = (0, import_react28.useCallback)(
     (value) => {
       const serializer = "serializer" in options ? options.serializer : JSON.stringify;
       const nextValue = typeof value === "function" ? value(getSnapshot()) : value;
@@ -1040,14 +1062,14 @@ function useStorageState(key, {
     },
     [getSnapshot, key, storage]
   );
-  const refreshStorageState = (0, import_react27.useCallback)(() => {
+  const refreshStorageState = (0, import_react28.useCallback)(() => {
     setStorageState(getSnapshot());
   }, [storage, getSnapshot, setStorageState]);
   return ensureSerializable([storageState, setStorageState, refreshStorageState]);
 }
 
 // src/hooks/useThrottle/useThrottle.ts
-var import_react28 = require("react");
+var import_react29 = require("react");
 
 // src/hooks/useThrottle/throttle.ts
 function throttle(func, throttleMs, { edges = ["leading", "trailing"] } = {}) {
@@ -1072,11 +1094,11 @@ function throttle(func, throttleMs, { edges = ["leading", "trailing"] } = {}) {
 function useThrottle(callback, wait, options) {
   const preservedCallback = usePreservedCallback(callback);
   const preservedOptions = usePreservedReference(options ?? {});
-  const throttledCallback = (0, import_react28.useMemo)(
+  const throttledCallback = (0, import_react29.useMemo)(
     () => throttle(preservedCallback, wait, preservedOptions),
     [preservedOptions, preservedCallback, wait]
   );
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     return () => {
       throttledCallback.cancel();
     };
@@ -1085,29 +1107,29 @@ function useThrottle(callback, wait, options) {
 }
 
 // src/hooks/useTimeout/useTimeout.ts
-var import_react29 = require("react");
+var import_react30 = require("react");
 function useTimeout(callback, delay = 0) {
   const preservedCallback = usePreservedCallback(callback);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     const timeoutId = window.setTimeout(preservedCallback, delay);
     return () => window.clearTimeout(timeoutId);
   }, [delay, preservedCallback]);
 }
 
 // src/hooks/useToggle/useToggle.ts
-var import_react30 = require("react");
+var import_react31 = require("react");
 function useToggle(initialValue = false) {
-  return (0, import_react30.useReducer)(toggle, initialValue);
+  return (0, import_react31.useReducer)(toggle, initialValue);
 }
 var toggle = (state) => !state;
 
 // src/utils/buildContext/buildContext.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function buildContext(contextName, defaultContextValues) {
-  const Context = (0, import_react31.createContext)(defaultContextValues ?? void 0);
+  const Context = (0, import_react32.createContext)(defaultContextValues ?? void 0);
   function Provider({ children, ...contextValues }) {
-    const value = (0, import_react31.useMemo)(
+    const value = (0, import_react32.useMemo)(
       () => Object.keys(contextValues).length > 0 ? contextValues : null,
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [...Object.values(contextValues)]
@@ -1115,7 +1137,7 @@ function buildContext(contextName, defaultContextValues) {
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Context.Provider, { value, children });
   }
   function useInnerContext() {
-    const context = (0, import_react31.useContext)(Context);
+    const context = (0, import_react32.useContext)(Context);
     if (context != null) {
       return context;
     }
@@ -1178,6 +1200,7 @@ function mergeFunction(a, b) {
   useAsyncEffect,
   useBooleanState,
   useCallbackOncePerRender,
+  useConditionalEffect,
   useControlledState,
   useCounter,
   useDebounce,

package/dist/index.d.cts

@@ -4,6 +4,7 @@ export { SwitchCase } from './components/SwitchCase/index.cjs';
 export { useAsyncEffect } from './hooks/useAsyncEffect/index.cjs';
 export { useBooleanState } from './hooks/useBooleanState/index.cjs';
 export { useCallbackOncePerRender } from './hooks/useCallbackOncePerRender/index.cjs';
+export { useConditionalEffect } from './hooks/useConditionalEffect/index.cjs';
 export { useControlledState } from './hooks/useControlledState/index.cjs';
 export { useCounter } from './hooks/useCounter/index.cjs';
 export { useDebounce } from './hooks/useDebounce/index.cjs';

package/esm/components/ImpressionArea/index.d.ts

@@ -42,6 +42,6 @@ type Props<Tag extends ElementType> = React.ComponentPropsWithoutRef<Tag> & UseI
  */
 declare const ImpressionArea: <T extends ElementType = "div">(props: Props<T> & {
     ref?: Ref<Element<T>>;
-}) => React.ReactNode;
+}) => React.ReactElement;
 
 export { ImpressionArea };

package/esm/hooks/useConditionalEffect/index.d.ts

@@ -0,0 +1,43 @@
+import { DependencyList, EffectCallback } from 'react';
+
+/**
+ * @description
+ * `useConditionalEffect` is a React hook that conditionally executes effects based on a predicate function.
+ * This provides more control over when effects run beyond just dependency changes.
+ *
+ * @param {EffectCallback} effect - The effect callback to run.
+ * @param {DependencyList} deps - Dependencies array, similar to useEffect.
+ * @param {(prevDeps: T | undefined, currentDeps: T) => boolean} condition - Function that determines if the effect should run based on previous and current deps.
+ * - On the initial render, `prevDeps` will be `undefined`. Your `condition` function should handle this case.
+ * - If you want your effect to run on the initial render, return `true` when `prevDeps` is `undefined`.
+ * - If you don't want your effect to run on the initial render, return `false` when `prevDeps` is `undefined`.
+ *
+ * @example
+ * import { useConditionalEffect } from 'react-simplikit';
+ *
+ * function Component() {
+ *   const [count, setCount] = useState(0);
+ *
+ *   // Only run effect when count increases
+ *   useConditionalEffect(
+ *     () => {
+ *       console.log(`Count increased to ${count}`);
+ *     },
+ *     [count],
+ *     (prevDeps, currentDeps) => {
+ *       // Only run when count is defined and has increased
+ *       return prevDeps && currentDeps[0] > prevDeps[0];
+ *     }
+ *   );
+ *
+ *   return (
+ *     <button onClick={() => setCount(prev => prev + 1)}>
+ *       Increment: {count}
+ *     </button>
+ *   );
+ * }
+ *
+ */
+declare function useConditionalEffect<T extends DependencyList>(effect: EffectCallback, deps: T, condition: (prevDeps: T | undefined, currentDeps: T) => boolean): void;
+
+export { useConditionalEffect };

package/esm/hooks/useConditionalEffect/index.js

@@ -0,0 +1,23 @@
+// src/hooks/useConditionalEffect/useConditionalEffect.ts
+import { useCallback, useEffect, useRef } from "react";
+function useConditionalEffect(effect, deps, condition) {
+  const prevDepsRef = useRef(void 0);
+  const memoizedCondition = useCallback(condition, deps);
+  if (deps.length === 0) {
+    console.warn(
+      "useConditionalEffect received an empty dependency array. This may indicate missing dependencies and could lead to unexpected behavior."
+    );
+  }
+  const shouldRun = memoizedCondition(prevDepsRef.current, deps);
+  useEffect(() => {
+    if (shouldRun) {
+      const cleanup = effect();
+      prevDepsRef.current = deps;
+      return cleanup;
+    }
+    prevDepsRef.current = deps;
+  }, deps);
+}
+export {
+  useConditionalEffect
+};

package/esm/index.d.ts

@@ -4,6 +4,7 @@ export { SwitchCase } from './components/SwitchCase/index.js';
 export { useAsyncEffect } from './hooks/useAsyncEffect/index.js';
 export { useBooleanState } from './hooks/useBooleanState/index.js';
 export { useCallbackOncePerRender } from './hooks/useCallbackOncePerRender/index.js';
+export { useConditionalEffect } from './hooks/useConditionalEffect/index.js';
 export { useControlledState } from './hooks/useControlledState/index.js';
 export { useCounter } from './hooks/useCounter/index.js';
 export { useDebounce } from './hooks/useDebounce/index.js';

package/esm/index.js

@@ -323,8 +323,29 @@ function useCallbackOncePerRender(callback, deps) {
   });
 }
 
+// src/hooks/useConditionalEffect/useConditionalEffect.ts
+import { useCallback as useCallback6, useEffect as useEffect6, useRef as useRef6 } from "react";
+function useConditionalEffect(effect, deps, condition) {
+  const prevDepsRef = useRef6(void 0);
+  const memoizedCondition = useCallback6(condition, deps);
+  if (deps.length === 0) {
+    console.warn(
+      "useConditionalEffect received an empty dependency array. This may indicate missing dependencies and could lead to unexpected behavior."
+    );
+  }
+  const shouldRun = memoizedCondition(prevDepsRef.current, deps);
+  useEffect6(() => {
+    if (shouldRun) {
+      const cleanup = effect();
+      prevDepsRef.current = deps;
+      return cleanup;
+    }
+    prevDepsRef.current = deps;
+  }, deps);
+}
+
 // src/hooks/useControlledState/useControlledState.ts
-import { useCallback as useCallback6, useState as useState2 } from "react";
+import { useCallback as useCallback7, useState as useState2 } from "react";
 function useControlledState({
   value: valueProp,
   defaultValue,
@@ -334,7 +355,7 @@ function useControlledState({
   const [uncontrolledState, setUncontrolledState] = useState2(defaultValue);
   const controlled = valueProp !== void 0;
   const value = controlled ? valueProp : uncontrolledState;
-  const setValue = useCallback6(
+  const setValue = useCallback7(
     (next) => {
       const nextValue = isSetStateAction(next) ? next(value) : next;
       if (equalityFn(value, nextValue) === true) return;
@@ -351,7 +372,7 @@ function isSetStateAction(next) {
 }
 
 // src/hooks/useCounter/useCounter.ts
-import { useCallback as useCallback7, useState as useState3 } from "react";
+import { useCallback as useCallback8, useState as useState3 } from "react";
 function useCounter(initialValue = 0, { min, max, step = 1 } = {}) {
   const validateValue = (value) => {
     let validatedValue = value;
@@ -364,8 +385,8 @@ function useCounter(initialValue = 0, { min, max, step = 1 } = {}) {
     return validatedValue;
   };
   const [count, setCountState] = useState3(() => validateValue(initialValue));
-  const validateValueMemoized = useCallback7(validateValue, [min, max]);
-  const setCount = useCallback7(
+  const validateValueMemoized = useCallback8(validateValue, [min, max]);
+  const setCount = useCallback8(
     (value) => {
       setCountState((prev) => {
         const nextValue = typeof value === "function" ? value(prev) : value;
@@ -374,13 +395,13 @@ function useCounter(initialValue = 0, { min, max, step = 1 } = {}) {
     },
     [validateValueMemoized]
   );
-  const increment = useCallback7(() => {
+  const increment = useCallback8(() => {
     setCount((prev) => prev + step);
   }, [setCount, step]);
-  const decrement = useCallback7(() => {
+  const decrement = useCallback8(() => {
     setCount((prev) => prev - step);
   }, [setCount, step]);
-  const reset = useCallback7(() => {
+  const reset = useCallback8(() => {
     setCount(initialValue);
   }, [setCount, initialValue]);
   return {
@@ -393,7 +414,7 @@ function useCounter(initialValue = 0, { min, max, step = 1 } = {}) {
 }
 
 // src/hooks/useDebounce/useDebounce.ts
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect7 } from "react";
 import { useMemo as useMemo3 } from "react";
 function useDebounce(callback, wait, options = {}) {
   const preservedCallback = usePreservedCallback(callback);
@@ -411,7 +432,7 @@ function useDebounce(callback, wait, options = {}) {
   const debounced = useMemo3(() => {
     return debounce(preservedCallback, wait, { edges });
   }, [preservedCallback, wait, edges]);
-  useEffect6(() => {
+  useEffect7(() => {
     return () => {
       debounced.cancel();
     };
@@ -420,21 +441,21 @@ function useDebounce(callback, wait, options = {}) {
 }
 
 // src/hooks/useDoubleClick/useDoubleClick.ts
-import { useCallback as useCallback8, useEffect as useEffect7, useRef as useRef6 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect8, useRef as useRef7 } from "react";
 function useDoubleClick({
   delay = 250,
   click,
   doubleClick
 }) {
-  const clickTimeout = useRef6(null);
+  const clickTimeout = useRef7(null);
   const clearClickTimeout = usePreservedCallback(() => {
     if (clickTimeout.current != null) {
       window.clearTimeout(clickTimeout.current);
       clickTimeout.current = null;
     }
   });
-  useEffect7(() => () => clearClickTimeout(), [clearClickTimeout]);
-  const handleEvent = useCallback8(
+  useEffect8(() => () => clearClickTimeout(), [clearClickTimeout]);
+  const handleEvent = useCallback9(
     (event) => {
       clearClickTimeout();
       if (click && event.detail === 1) {
@@ -452,7 +473,7 @@ function useDoubleClick({
 }
 
 // src/hooks/useGeolocation/useGeolocation.ts
-import { useCallback as useCallback9, useEffect as useEffect8, useRef as useRef7, useState as useState4 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect9, useRef as useRef8, useState as useState4 } from "react";
 var CustomGeoLocationError = class extends Error {
   code;
   constructor({ code, message }) {
@@ -472,8 +493,8 @@ function useGeolocation(options) {
     data: null
   });
   const [isTracking, setIsTracking] = useState4(false);
-  const watchIdRef = useRef7(null);
-  const checkGeolocationSupport = useCallback9(() => {
+  const watchIdRef = useRef8(null);
+  const checkGeolocationSupport = useCallback10(() => {
     if (typeof window === "undefined" || navigator.geolocation === void 0) {
       setState((prev) => ({
         ...prev,
@@ -487,7 +508,7 @@ function useGeolocation(options) {
     }
     return true;
   }, []);
-  const handleSuccess = useCallback9((position) => {
+  const handleSuccess = useCallback10((position) => {
     const { coords } = position;
     setState((prev) => ({
       ...prev,
@@ -505,7 +526,7 @@ function useGeolocation(options) {
       }
     }));
   }, []);
-  const handleError = useCallback9((error) => {
+  const handleError = useCallback10((error) => {
     const { code, message } = error;
     setState((prev) => ({
       ...prev,
@@ -513,7 +534,7 @@ function useGeolocation(options) {
       error: new CustomGeoLocationError({ code, message })
     }));
   }, []);
-  const getGeolocationOptions = useCallback9(
+  const getGeolocationOptions = useCallback10(
     () => ({
       enableHighAccuracy: options?.enableHighAccuracy,
       maximumAge: options?.maximumAge,
@@ -521,14 +542,14 @@ function useGeolocation(options) {
     }),
     [options?.enableHighAccuracy, options?.maximumAge, options?.timeout]
   );
-  const getCurrentPosition = useCallback9(() => {
+  const getCurrentPosition = useCallback10(() => {
     if (!checkGeolocationSupport()) {
       return;
     }
     setState((prev) => ({ ...prev, loading: true }));
     navigator.geolocation.getCurrentPosition(handleSuccess, handleError, getGeolocationOptions());
   }, [handleSuccess, handleError, getGeolocationOptions, checkGeolocationSupport]);
-  const startTracking = useCallback9(() => {
+  const startTracking = useCallback10(() => {
     if (!checkGeolocationSupport()) {
       return;
     }
@@ -545,7 +566,7 @@ function useGeolocation(options) {
       getGeolocationOptions()
     );
   }, [handleSuccess, handleError, getGeolocationOptions, checkGeolocationSupport]);
-  const stopTracking = useCallback9(() => {
+  const stopTracking = useCallback10(() => {
     if (watchIdRef.current === null) {
       return;
     }
@@ -553,7 +574,7 @@ function useGeolocation(options) {
     watchIdRef.current = null;
     setIsTracking(false);
   }, []);
-  useEffect8(() => {
+  useEffect9(() => {
     if (options?.mountBehavior === GeolocationMountBehavior.WATCH) {
       startTracking();
     } else if (options?.mountBehavior === GeolocationMountBehavior.GET) {
@@ -576,10 +597,10 @@ function useGeolocation(options) {
 }
 
 // src/hooks/useInputState/useInputState.ts
-import { useCallback as useCallback10, useState as useState5 } from "react";
+import { useCallback as useCallback11, useState as useState5 } from "react";
 function useInputState(initialValue = "", transformValue = echo) {
   const [value, setValue] = useState5(initialValue);
-  const handleValueChange = useCallback10(
+  const handleValueChange = useCallback11(
     ({ target: { value: value2 } }) => {
       setValue(transformValue(value2));
     },
@@ -592,18 +613,18 @@ function echo(v) {
 }
 
 // src/hooks/useInterval/useInterval.ts
-import { useEffect as useEffect9 } from "react";
+import { useEffect as useEffect10 } from "react";
 function useInterval(callback, options) {
   const delay = typeof options === "number" ? options : options.delay;
   const immediate = typeof options === "number" ? false : options.immediate;
   const enabled = typeof options === "number" ? true : options.enabled ?? true;
   const preservedCallback = usePreservedCallback(callback);
-  useEffect9(() => {
+  useEffect10(() => {
     if (immediate === true && enabled) {
       preservedCallback();
     }
   }, [immediate, preservedCallback, enabled]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!enabled) {
       return;
     }
@@ -613,16 +634,16 @@ function useInterval(callback, options) {
 }
 
 // src/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts
-import { useEffect as useEffect10, useLayoutEffect } from "react";
+import { useEffect as useEffect11, useLayoutEffect } from "react";
 var isServer = typeof window === "undefined";
-var useIsomorphicLayoutEffect = isServer ? useEffect10 : useLayoutEffect;
+var useIsomorphicLayoutEffect = isServer ? useEffect11 : useLayoutEffect;
 
 // src/hooks/useLoading/useLoading.ts
-import { useCallback as useCallback11, useEffect as useEffect11, useMemo as useMemo4, useRef as useRef8, useState as useState6 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect12, useMemo as useMemo4, useRef as useRef9, useState as useState6 } from "react";
 function useLoading() {
   const [loading, setLoading] = useState6(false);
   const ref = useIsMountedRef();
-  const startTransition = useCallback11(
+  const startTransition = useCallback12(
     async (promise) => {
       try {
         setLoading(true);
@@ -639,8 +660,8 @@ function useLoading() {
   return useMemo4(() => [loading, startTransition], [loading, startTransition]);
 }
 function useIsMountedRef() {
-  const ref = useRef8({ isMounted: true }).current;
-  useEffect11(() => {
+  const ref = useRef9({ isMounted: true }).current;
+  useEffect12(() => {
     ref.isMounted = true;
     return () => {
       ref.isMounted = false;
@@ -650,18 +671,18 @@ function useIsMountedRef() {
 }
 
 // src/hooks/useLongPress/useLongPress.ts
-import { useCallback as useCallback12, useRef as useRef9 } from "react";
+import { useCallback as useCallback13, useRef as useRef10 } from "react";
 function useLongPress(onLongPress, { delay = 500, moveThreshold, onClick, onLongPressEnd } = {}) {
-  const timeoutRef = useRef9(null);
-  const isLongPressActiveRef = useRef9(false);
-  const initialPositionRef = useRef9({ x: 0, y: 0 });
+  const timeoutRef = useRef10(null);
+  const isLongPressActiveRef = useRef10(false);
+  const initialPositionRef = useRef10({ x: 0, y: 0 });
   const preservedOnLongPress = usePreservedCallback(onLongPress);
   const preservedOnClick = usePreservedCallback(onClick || (() => {
   }));
   const preservedOnLongPressEnd = usePreservedCallback(onLongPressEnd || (() => {
   }));
   const hasThreshold = moveThreshold?.x !== void 0 || moveThreshold?.y !== void 0;
-  const getClientPosition = useCallback12((event) => {
+  const getClientPosition = useCallback13((event) => {
     if ("touches" in event.nativeEvent) {
       const touch = event.nativeEvent.touches[0];
       return { x: touch.clientX, y: touch.clientY };
@@ -671,7 +692,7 @@ function useLongPress(onLongPress, { delay = 500, moveThreshold, onClick, onLong
       y: event.nativeEvent.clientY
     };
   }, []);
-  const isMovedBeyondThreshold = useCallback12(
+  const isMovedBeyondThreshold = useCallback13(
     (event) => {
       const { x, y } = getClientPosition(event);
       const deltaX = Math.abs(x - initialPositionRef.current.x);
@@ -680,13 +701,13 @@ function useLongPress(onLongPress, { delay = 500, moveThreshold, onClick, onLong
     },
     [getClientPosition, moveThreshold]
   );
-  const cancelLongPress = useCallback12(() => {
+  const cancelLongPress = useCallback13(() => {
     if (timeoutRef.current !== null) {
       window.clearTimeout(timeoutRef.current);
       timeoutRef.current = null;
     }
   }, []);
-  const handlePressStart = useCallback12(
+  const handlePressStart = useCallback13(
     (event) => {
       cancelLongPress();
       const position = getClientPosition(event);
@@ -699,7 +720,7 @@ function useLongPress(onLongPress, { delay = 500, moveThreshold, onClick, onLong
     },
     [cancelLongPress, delay, getClientPosition, preservedOnLongPress]
   );
-  const handlePressEnd = useCallback12(
+  const handlePressEnd = useCallback13(
     (event) => {
       if (isLongPressActiveRef.current) {
         preservedOnLongPressEnd(event);
@@ -711,7 +732,7 @@ function useLongPress(onLongPress, { delay = 500, moveThreshold, onClick, onLong
     },
     [cancelLongPress, preservedOnClick, preservedOnLongPressEnd]
   );
-  const handlePressMove = useCallback12(
+  const handlePressMove = useCallback13(
     (event) => {
       if (timeoutRef.current !== null && isMovedBeyondThreshold(event)) {
         cancelLongPress();
@@ -730,12 +751,12 @@ function useLongPress(onLongPress, { delay = 500, moveThreshold, onClick, onLong
 }
 
 // src/hooks/useMap/useMap.ts
-import { useCallback as useCallback13, useMemo as useMemo6, useState as useState7 } from "react";
+import { useCallback as useCallback14, useMemo as useMemo6, useState as useState7 } from "react";
 
 // src/hooks/usePreservedReference/usePreservedReference.ts
-import { useMemo as useMemo5, useRef as useRef10 } from "react";
+import { useMemo as useMemo5, useRef as useRef11 } from "react";
 function usePreservedReference(value, areValuesEqual = areDeeplyEqual) {
-  const ref = useRef10(value);
+  const ref = useRef11(value);
   return useMemo5(() => {
     if (!areValuesEqual(ref.current, value)) {
       ref.current = value;
@@ -751,24 +772,24 @@ function areDeeplyEqual(x, y) {
 function useMap(initialState = /* @__PURE__ */ new Map()) {
   const [map, setMap] = useState7(() => new Map(initialState));
   const preservedInitialState = usePreservedReference(initialState);
-  const set = useCallback13((key, value) => {
+  const set = useCallback14((key, value) => {
     setMap((prev) => {
       const nextMap = new Map(prev);
       nextMap.set(key, value);
       return nextMap;
     });
   }, []);
-  const setAll = useCallback13((entries) => {
+  const setAll = useCallback14((entries) => {
     setMap(() => new Map(entries));
   }, []);
-  const remove = useCallback13((key) => {
+  const remove = useCallback14((key) => {
     setMap((prev) => {
       const nextMap = new Map(prev);
       nextMap.delete(key);
       return nextMap;
     });
   }, []);
-  const reset = useCallback13(() => {
+  const reset = useCallback14(() => {
     setMap(() => new Map(preservedInitialState));
   }, [preservedInitialState]);
   const actions = useMemo6(() => {
@@ -778,9 +799,9 @@ function useMap(initialState = /* @__PURE__ */ new Map()) {
 }
 
 // src/hooks/useOutsideClickEffect/useOutsideClickEffect.ts
-import { useEffect as useEffect12, useRef as useRef11 } from "react";
+import { useEffect as useEffect13, useRef as useRef12 } from "react";
 function useOutsideClickEffect(container, callback) {
-  const containers = useRef11([]);
+  const containers = useRef12([]);
   const handleDocumentClick = usePreservedCallback(({ target }) => {
     if (target === null) {
       return;
@@ -793,10 +814,10 @@ function useOutsideClickEffect(container, callback) {
     }
     callback();
   });
-  useEffect12(() => {
+  useEffect13(() => {
     containers.current = [container].flat(1).filter((item) => item != null);
   }, [container]);
-  useEffect12(() => {
+  useEffect13(() => {
     document.addEventListener("click", handleDocumentClick);
     return () => {
       document.removeEventListener("click", handleDocumentClick);
@@ -805,12 +826,12 @@ function useOutsideClickEffect(container, callback) {
 }
 
 // src/hooks/usePrevious/usePrevious.ts
-import { useRef as useRef12 } from "react";
+import { useRef as useRef13 } from "react";
 var strictEquals = (prev, next) => prev === next;
 function usePrevious(state, compare = strictEquals) {
-  const prevRef = useRef12(state);
-  const currentRef = useRef12(state);
-  const isFirstRender = useRef12(true);
+  const prevRef = useRef13(state);
+  const currentRef = useRef13(state);
+  const isFirstRender = useRef13(true);
   if (isFirstRender.current) {
     isFirstRender.current = false;
     return prevRef.current;
@@ -823,7 +844,7 @@ function usePrevious(state, compare = strictEquals) {
 }
 
 // src/hooks/useStorageState/useStorageState.ts
-import { useCallback as useCallback14, useRef as useRef13, useSyncExternalStore } from "react";
+import { useCallback as useCallback15, useRef as useRef14, useSyncExternalStore } from "react";
 
 // src/hooks/useStorageState/storage.ts
 var MemoStorage = class {
@@ -935,11 +956,11 @@ function useStorageState(key, {
   ...options
 } = {}) {
   const serializedDefaultValue = defaultValue;
-  const cache = useRef13({
+  const cache = useRef14({
     data: null,
     parsed: serializedDefaultValue
   });
-  const getSnapshot = useCallback14(() => {
+  const getSnapshot = useCallback15(() => {
     const deserializer = "deserializer" in options ? options.deserializer : JSON.parse;
     const data = storage.get(key);
     if (data !== cache.current.data) {
@@ -969,7 +990,7 @@ function useStorageState(key, {
     () => getSnapshot(),
     () => serializedDefaultValue
   );
-  const setStorageState = useCallback14(
+  const setStorageState = useCallback15(
     (value) => {
       const serializer = "serializer" in options ? options.serializer : JSON.stringify;
       const nextValue = typeof value === "function" ? value(getSnapshot()) : value;
@@ -982,14 +1003,14 @@ function useStorageState(key, {
     },
     [getSnapshot, key, storage]
   );
-  const refreshStorageState = useCallback14(() => {
+  const refreshStorageState = useCallback15(() => {
     setStorageState(getSnapshot());
   }, [storage, getSnapshot, setStorageState]);
   return ensureSerializable([storageState, setStorageState, refreshStorageState]);
 }
 
 // src/hooks/useThrottle/useThrottle.ts
-import { useEffect as useEffect13, useMemo as useMemo7 } from "react";
+import { useEffect as useEffect14, useMemo as useMemo7 } from "react";
 
 // src/hooks/useThrottle/throttle.ts
 function throttle(func, throttleMs, { edges = ["leading", "trailing"] } = {}) {
@@ -1018,7 +1039,7 @@ function useThrottle(callback, wait, options) {
     () => throttle(preservedCallback, wait, preservedOptions),
     [preservedOptions, preservedCallback, wait]
   );
-  useEffect13(() => {
+  useEffect14(() => {
     return () => {
       throttledCallback.cancel();
     };
@@ -1027,10 +1048,10 @@ function useThrottle(callback, wait, options) {
 }
 
 // src/hooks/useTimeout/useTimeout.ts
-import { useEffect as useEffect14 } from "react";
+import { useEffect as useEffect15 } from "react";
 function useTimeout(callback, delay = 0) {
   const preservedCallback = usePreservedCallback(callback);
-  useEffect14(() => {
+  useEffect15(() => {
     const timeoutId = window.setTimeout(preservedCallback, delay);
     return () => window.clearTimeout(timeoutId);
   }, [delay, preservedCallback]);
@@ -1119,6 +1140,7 @@ export {
   useAsyncEffect,
   useBooleanState,
   useCallbackOncePerRender,
+  useConditionalEffect,
   useControlledState,
   useCounter,
   useDebounce,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-simplikit",
-  "version": "0.0.38",
+  "version": "0.0.40",
   "main": "./dist/index.cjs",
   "type": "module",
   "sideEffects": false,