react-simplikit 0.0.47 → 0.0.49

package/dist/index.cjs

@@ -41,7 +41,9 @@ __export(index_exports, {
   useInputState: () => useInputState,
   useIntersectionObserver: () => useIntersectionObserver,
   useInterval: () => useInterval,
+  useIsClient: () => useIsClient,
   useIsomorphicLayoutEffect: () => useIsomorphicLayoutEffect,
+  useList: () => useList,
   useLoading: () => useLoading,
   useLongPress: () => useLongPress,
   useMap: () => useMap,
@@ -50,8 +52,10 @@ __export(index_exports, {
   usePreservedReference: () => usePreservedReference,
   usePrevious: () => usePrevious,
   useRefEffect: () => useRefEffect,
+  useSet: () => useSet,
   useStorageState: () => useStorageState,
   useThrottle: () => useThrottle,
+  useThrottledCallback: () => useThrottledCallback,
   useTimeout: () => useTimeout,
   useToggle: () => useToggle,
   useVisibilityEvent: () => useVisibilityEvent
@@ -124,9 +128,12 @@ function debounce(func, debounceMs, { edges = ["leading", "trailing"] } = {}) {
 var import_react = require("react");
 function usePreservedCallback(callback) {
   const callbackRef = (0, import_react.useRef)(callback);
-  (0, import_react.useEffect)(() => {
-    callbackRef.current = callback;
-  }, [callback]);
+  (0, import_react.useEffect)(
+    function syncCallbackRef() {
+      callbackRef.current = callback;
+    },
+    [callback]
+  );
   return (0, import_react.useCallback)((...args) => {
     return callbackRef.current(...args);
   }, []);
@@ -142,7 +149,7 @@ function useDebouncedCallback({
   const handleChange = usePreservedCallback(onChange);
   const ref = (0, import_react2.useRef)({ value: false, clearPreviousDebounce: () => {
   } });
-  (0, import_react2.useEffect)(() => {
+  (0, import_react2.useEffect)(function clearDebouncedOnUnmount() {
     const current = ref.current;
     return () => {
       current.clearPreviousDebounce();
@@ -328,7 +335,7 @@ function Separated({ children, by: separator }) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: childrenArray.map((child, i, { length }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react8.Fragment, { children: [
     child,
     i + 1 !== length && separator
-  ] }, i)) });
+  ] }, child.key ?? i)) });
 }
 
 // src/components/SwitchCase/SwitchCase.tsx
@@ -492,11 +499,14 @@ function useDebounce(callback, wait, options = {}) {
   const debounced = (0, import_react16.useMemo)(() => {
     return debounce(preservedCallback, wait, { edges });
   }, [preservedCallback, wait, edges]);
-  (0, import_react15.useEffect)(() => {
-    return () => {
-      debounced.cancel();
-    };
-  }, [debounced]);
+  (0, import_react15.useEffect)(
+    function cancelDebouncedOnUnmount() {
+      return () => {
+        debounced.cancel();
+      };
+    },
+    [debounced]
+  );
   return debounced;
 }
 
@@ -679,31 +689,106 @@ function useInterval(callback, options) {
   const immediate = typeof options === "number" ? false : options.immediate;
   const enabled = typeof options === "number" ? true : options.enabled ?? true;
   const preservedCallback = usePreservedCallback(callback);
-  (0, import_react20.useEffect)(() => {
-    if (immediate === true && enabled) {
-      preservedCallback();
-    }
-  }, [immediate, preservedCallback, enabled]);
-  (0, import_react20.useEffect)(() => {
-    if (!enabled) {
-      return;
-    }
-    const id = window.setInterval(preservedCallback, delay);
-    return () => window.clearInterval(id);
-  }, [delay, preservedCallback, enabled]);
+  (0, import_react20.useEffect)(
+    function runImmediateCallback() {
+      if (immediate === true && enabled) {
+        preservedCallback();
+      }
+    },
+    [immediate, preservedCallback, enabled]
+  );
+  (0, import_react20.useEffect)(
+    function startInterval() {
+      if (!enabled) {
+        return;
+      }
+      const id = setInterval(preservedCallback, delay);
+      return () => clearInterval(id);
+    },
+    [delay, preservedCallback, enabled]
+  );
 }
 
-// src/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts
+// src/hooks/useIsClient/useIsClient.ts
 var import_react21 = require("react");
+function useIsClient() {
+  const [isClient, setIsClient] = (0, import_react21.useState)(false);
+  (0, import_react21.useEffect)(function syncClientState() {
+    setIsClient(true);
+  }, []);
+  return isClient;
+}
+
+// src/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.ts
+var import_react22 = require("react");
 var isServer = typeof window === "undefined";
-var useIsomorphicLayoutEffect = isServer ? import_react21.useEffect : import_react21.useLayoutEffect;
+var useIsomorphicLayoutEffect = isServer ? import_react22.useEffect : import_react22.useLayoutEffect;
+
+// src/hooks/useList/useList.ts
+var import_react24 = require("react");
+
+// src/hooks/usePreservedReference/usePreservedReference.ts
+var import_react23 = require("react");
+function usePreservedReference(value, areValuesEqual = areDeeplyEqual) {
+  const ref = (0, import_react23.useRef)(value);
+  return (0, import_react23.useMemo)(() => {
+    if (!areValuesEqual(ref.current, value)) {
+      ref.current = value;
+    }
+    return ref.current;
+  }, [areValuesEqual, value]);
+}
+function areDeeplyEqual(x, y) {
+  return JSON.stringify(x) === JSON.stringify(y);
+}
+
+// src/hooks/useList/useList.ts
+function useList(initialState = []) {
+  const [list, setList] = (0, import_react24.useState)(initialState);
+  const preservedInitialState = usePreservedReference(initialState);
+  const push = usePreservedCallback((value) => {
+    setList((prev) => [...prev, value]);
+  });
+  const insertAt = usePreservedCallback((index, value) => {
+    setList((prev) => {
+      const next = [...prev];
+      next.splice(index, 0, value);
+      return next;
+    });
+  });
+  const updateAt = usePreservedCallback((index, value) => {
+    setList((prev) => {
+      const next = [...prev];
+      next[index] = value;
+      return next;
+    });
+  });
+  const removeAt = usePreservedCallback((index) => {
+    setList((prev) => {
+      const next = [...prev];
+      next.splice(index, 1);
+      return next;
+    });
+  });
+  const setAll = usePreservedCallback((values) => {
+    setList(values);
+  });
+  const reset = usePreservedCallback(() => {
+    setList(preservedInitialState);
+  });
+  const actions = (0, import_react24.useMemo)(
+    () => ({ push, insertAt, updateAt, removeAt, setAll, reset }),
+    [push, insertAt, updateAt, removeAt, setAll, reset]
+  );
+  return [list, actions];
+}
 
 // src/hooks/useLoading/useLoading.ts
-var import_react22 = require("react");
+var import_react25 = require("react");
 function useLoading() {
-  const [loading, setLoading] = (0, import_react22.useState)(false);
+  const [loading, setLoading] = (0, import_react25.useState)(false);
   const ref = useIsMountedRef();
-  const startTransition = (0, import_react22.useCallback)(
+  const startTransition = (0, import_react25.useCallback)(
     async (promise) => {
       try {
         setLoading(true);
@@ -717,32 +802,35 @@ function useLoading() {
     },
     [ref.isMounted]
   );
-  return (0, import_react22.useMemo)(() => [loading, startTransition], [loading, startTransition]);
+  return (0, import_react25.useMemo)(() => [loading, startTransition], [loading, startTransition]);
 }
 function useIsMountedRef() {
-  const ref = (0, import_react22.useRef)({ isMounted: true }).current;
-  (0, import_react22.useEffect)(() => {
-    ref.isMounted = true;
-    return () => {
-      ref.isMounted = false;
-    };
-  }, [ref]);
+  const ref = (0, import_react25.useRef)({ isMounted: true }).current;
+  (0, import_react25.useEffect)(
+    function trackMountedState() {
+      ref.isMounted = true;
+      return () => {
+        ref.isMounted = false;
+      };
+    },
+    [ref]
+  );
   return ref;
 }
 
 // src/hooks/useLongPress/useLongPress.ts
-var import_react23 = require("react");
+var import_react26 = require("react");
 function useLongPress(onLongPress, { delay = 500, moveThreshold, onClick, onLongPressEnd } = {}) {
-  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 timeoutRef = (0, import_react26.useRef)(null);
+  const isLongPressActiveRef = (0, import_react26.useRef)(false);
+  const initialPositionRef = (0, import_react26.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_react23.useCallback)((event) => {
+  const getClientPosition = (0, import_react26.useCallback)((event) => {
     if ("touches" in event.nativeEvent) {
       const touch = event.nativeEvent.touches[0];
       return { x: touch.clientX, y: touch.clientY };
@@ -752,7 +840,7 @@ function useLongPress(onLongPress, { delay = 500, moveThreshold, onClick, onLong
       y: event.nativeEvent.clientY
     };
   }, []);
-  const isMovedBeyondThreshold = (0, import_react23.useCallback)(
+  const isMovedBeyondThreshold = (0, import_react26.useCallback)(
     (event) => {
       const { x, y } = getClientPosition(event);
       const deltaX = Math.abs(x - initialPositionRef.current.x);
@@ -761,13 +849,13 @@ function useLongPress(onLongPress, { delay = 500, moveThreshold, onClick, onLong
     },
     [getClientPosition, moveThreshold]
   );
-  const cancelLongPress = (0, import_react23.useCallback)(() => {
+  const cancelLongPress = (0, import_react26.useCallback)(() => {
     if (timeoutRef.current !== null) {
       window.clearTimeout(timeoutRef.current);
       timeoutRef.current = null;
     }
   }, []);
-  const handlePressStart = (0, import_react23.useCallback)(
+  const handlePressStart = (0, import_react26.useCallback)(
     (event) => {
       cancelLongPress();
       const position = getClientPosition(event);
@@ -780,7 +868,7 @@ function useLongPress(onLongPress, { delay = 500, moveThreshold, onClick, onLong
     },
     [cancelLongPress, delay, getClientPosition, preservedOnLongPress]
   );
-  const handlePressEnd = (0, import_react23.useCallback)(
+  const handlePressEnd = (0, import_react26.useCallback)(
     (event) => {
       if (isLongPressActiveRef.current) {
         preservedOnLongPressEnd(event);
@@ -792,7 +880,7 @@ function useLongPress(onLongPress, { delay = 500, moveThreshold, onClick, onLong
     },
     [cancelLongPress, preservedOnClick, preservedOnLongPressEnd]
   );
-  const handlePressMove = (0, import_react23.useCallback)(
+  const handlePressMove = (0, import_react26.useCallback)(
     (event) => {
       if (timeoutRef.current !== null && isMovedBeyondThreshold(event)) {
         cancelLongPress();
@@ -811,57 +899,40 @@ function useLongPress(onLongPress, { delay = 500, moveThreshold, onClick, onLong
 }
 
 // src/hooks/useMap/useMap.ts
-var import_react25 = require("react");
-
-// src/hooks/usePreservedReference/usePreservedReference.ts
-var import_react24 = require("react");
-function usePreservedReference(value, areValuesEqual = areDeeplyEqual) {
-  const ref = (0, import_react24.useRef)(value);
-  return (0, import_react24.useMemo)(() => {
-    if (!areValuesEqual(ref.current, value)) {
-      ref.current = value;
-    }
-    return ref.current;
-  }, [areValuesEqual, value]);
-}
-function areDeeplyEqual(x, y) {
-  return JSON.stringify(x) === JSON.stringify(y);
-}
-
-// src/hooks/useMap/useMap.ts
+var import_react27 = require("react");
 function useMap(initialState = /* @__PURE__ */ new Map()) {
-  const [map, setMap] = (0, import_react25.useState)(() => new Map(initialState));
+  const [map, setMap] = (0, import_react27.useState)(() => new Map(initialState));
   const preservedInitialState = usePreservedReference(initialState);
-  const set = (0, import_react25.useCallback)((key, value) => {
+  const set = (0, import_react27.useCallback)((key, value) => {
     setMap((prev) => {
       const nextMap = new Map(prev);
       nextMap.set(key, value);
       return nextMap;
     });
   }, []);
-  const setAll = (0, import_react25.useCallback)((entries) => {
+  const setAll = (0, import_react27.useCallback)((entries) => {
     setMap(() => new Map(entries));
   }, []);
-  const remove = (0, import_react25.useCallback)((key) => {
+  const remove = (0, import_react27.useCallback)((key) => {
     setMap((prev) => {
       const nextMap = new Map(prev);
       nextMap.delete(key);
       return nextMap;
     });
   }, []);
-  const reset = (0, import_react25.useCallback)(() => {
+  const reset = (0, import_react27.useCallback)(() => {
     setMap(() => new Map(preservedInitialState));
   }, [preservedInitialState]);
-  const actions = (0, import_react25.useMemo)(() => {
+  const actions = (0, import_react27.useMemo)(() => {
     return { set, setAll, remove, reset };
   }, [set, setAll, remove, reset]);
   return [map, actions];
 }
 
 // src/hooks/useOutsideClickEffect/useOutsideClickEffect.ts
-var import_react26 = require("react");
+var import_react28 = require("react");
 function useOutsideClickEffect(container, callback) {
-  const containers = (0, import_react26.useRef)([]);
+  const containers = (0, import_react28.useRef)([]);
   const handleDocumentClick = usePreservedCallback(({ target }) => {
     if (target === null) {
       return;
@@ -874,10 +945,10 @@ function useOutsideClickEffect(container, callback) {
     }
     callback();
   });
-  (0, import_react26.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     containers.current = [container].flat(1).filter((item) => item != null);
   }, [container]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     document.addEventListener("click", handleDocumentClick);
     return () => {
       document.removeEventListener("click", handleDocumentClick);
@@ -886,12 +957,12 @@ function useOutsideClickEffect(container, callback) {
 }
 
 // src/hooks/usePrevious/usePrevious.ts
-var import_react27 = require("react");
+var import_react29 = require("react");
 var strictEquals = (prev, next) => prev === next;
 function usePrevious(state, compare = strictEquals) {
-  const prevRef = (0, import_react27.useRef)(state);
-  const currentRef = (0, import_react27.useRef)(state);
-  const isFirstRender = (0, import_react27.useRef)(true);
+  const prevRef = (0, import_react29.useRef)(state);
+  const currentRef = (0, import_react29.useRef)(state);
+  const isFirstRender = (0, import_react29.useRef)(true);
   if (isFirstRender.current) {
     isFirstRender.current = false;
     return prevRef.current;
@@ -903,8 +974,51 @@ function usePrevious(state, compare = strictEquals) {
   return prevRef.current;
 }
 
+// src/hooks/useSet/useSet.ts
+var import_react30 = require("react");
+function useSet(initialState = /* @__PURE__ */ new Set()) {
+  const [set, setSet] = (0, import_react30.useState)(() => new Set(initialState));
+  const preservedInitialState = usePreservedReference(initialState);
+  const add = usePreservedCallback((value) => {
+    setSet((prev) => {
+      const nextSet = new Set(prev);
+      nextSet.add(value);
+      return nextSet;
+    });
+  });
+  const remove = usePreservedCallback((value) => {
+    setSet((prev) => {
+      const nextSet = new Set(prev);
+      nextSet.delete(value);
+      return nextSet;
+    });
+  });
+  const toggle2 = usePreservedCallback((value) => {
+    setSet((prev) => {
+      const nextSet = new Set(prev);
+      if (nextSet.has(value)) {
+        nextSet.delete(value);
+      } else {
+        nextSet.add(value);
+      }
+      return nextSet;
+    });
+  });
+  const setAll = usePreservedCallback((values) => {
+    setSet(() => new Set(values));
+  });
+  const reset = usePreservedCallback(() => {
+    setSet(() => new Set(preservedInitialState));
+  });
+  const actions = (0, import_react30.useMemo)(
+    () => ({ add, remove, toggle: toggle2, setAll, reset }),
+    [add, remove, toggle2, setAll, reset]
+  );
+  return [set, actions];
+}
+
 // src/hooks/useStorageState/useStorageState.ts
-var import_react28 = require("react");
+var import_react31 = require("react");
 
 // src/hooks/useStorageState/storage.ts
 var MemoStorage = class {
@@ -1016,11 +1130,11 @@ function useStorageState(key, {
   ...options
 } = {}) {
   const serializedDefaultValue = defaultValue;
-  const cache = (0, import_react28.useRef)({
+  const cache = (0, import_react31.useRef)({
     data: null,
     parsed: serializedDefaultValue
   });
-  const getSnapshot = (0, import_react28.useCallback)(() => {
+  const getSnapshot = (0, import_react31.useCallback)(() => {
     const deserializer = "deserializer" in options ? options.deserializer : JSON.parse;
     const data = storage.get(key);
     if (data !== cache.current.data) {
@@ -1033,7 +1147,7 @@ function useStorageState(key, {
     }
     return cache.current.parsed;
   }, [defaultValue, key, storage]);
-  const storageState = (0, import_react28.useSyncExternalStore)(
+  const storageState = (0, import_react31.useSyncExternalStore)(
     (onStoreChange) => {
       listeners.add(onStoreChange);
       const handler = (event) => {
@@ -1050,7 +1164,7 @@ function useStorageState(key, {
     () => getSnapshot(),
     () => serializedDefaultValue
   );
-  const setStorageState = (0, import_react28.useCallback)(
+  const setStorageState = (0, import_react31.useCallback)(
     (value) => {
       const serializer = "serializer" in options ? options.serializer : JSON.stringify;
       const nextValue = typeof value === "function" ? value(getSnapshot()) : value;
@@ -1063,14 +1177,14 @@ function useStorageState(key, {
     },
     [getSnapshot, key, storage]
   );
-  const refreshStorageState = (0, import_react28.useCallback)(() => {
+  const refreshStorageState = (0, import_react31.useCallback)(() => {
     setStorageState(getSnapshot());
   }, [storage, getSnapshot, setStorageState]);
   return ensureSerializable([storageState, setStorageState, refreshStorageState]);
 }
 
 // src/hooks/useThrottle/useThrottle.ts
-var import_react29 = require("react");
+var import_react32 = require("react");
 
 // src/hooks/useThrottle/throttle.ts
 function throttle(func, throttleMs, { edges = ["leading", "trailing"] } = {}) {
@@ -1095,11 +1209,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_react29.useMemo)(
+  const throttledCallback = (0, import_react32.useMemo)(
     () => throttle(preservedCallback, wait, preservedOptions),
     [preservedOptions, preservedCallback, wait]
   );
-  (0, import_react29.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     return () => {
       throttledCallback.cancel();
     };
@@ -1107,30 +1221,68 @@ function useThrottle(callback, wait, options) {
   return throttledCallback;
 }
 
+// src/hooks/useThrottledCallback/useThrottledCallback.ts
+var import_react33 = require("react");
+function useThrottledCallback({
+  onChange,
+  timeThreshold,
+  edges = ["leading", "trailing"]
+}) {
+  const handleChange = usePreservedCallback(onChange);
+  const ref = (0, import_react33.useRef)({ value: false, clearPreviousThrottle: () => {
+  } });
+  (0, import_react33.useEffect)(function cleanupThrottleOnUnmount() {
+    const current = ref.current;
+    return () => {
+      current.clearPreviousThrottle();
+    };
+  }, []);
+  const preservedEdges = usePreservedReference(edges);
+  return (0, import_react33.useCallback)(
+    (nextValue) => {
+      if (nextValue === ref.current.value) {
+        return;
+      }
+      const throttled = throttle(
+        () => {
+          handleChange(nextValue);
+          ref.current.value = nextValue;
+        },
+        timeThreshold,
+        { edges: preservedEdges }
+      );
+      ref.current.clearPreviousThrottle();
+      throttled();
+      ref.current.clearPreviousThrottle = throttled.cancel;
+    },
+    [handleChange, timeThreshold, preservedEdges]
+  );
+}
+
 // src/hooks/useTimeout/useTimeout.ts
-var import_react30 = require("react");
+var import_react34 = require("react");
 function useTimeout(callback, delay = 0) {
   const preservedCallback = usePreservedCallback(callback);
-  (0, import_react30.useEffect)(() => {
-    const timeoutId = window.setTimeout(preservedCallback, delay);
-    return () => window.clearTimeout(timeoutId);
+  (0, import_react34.useEffect)(() => {
+    const timeoutId = setTimeout(preservedCallback, delay);
+    return () => clearTimeout(timeoutId);
   }, [delay, preservedCallback]);
 }
 
 // src/hooks/useToggle/useToggle.ts
-var import_react31 = require("react");
+var import_react35 = require("react");
 function useToggle(initialValue = false) {
-  return (0, import_react31.useReducer)(toggle, initialValue);
+  return (0, import_react35.useReducer)(toggle, initialValue);
 }
 var toggle = (state) => !state;
 
 // src/utils/buildContext/buildContext.tsx
-var import_react32 = require("react");
+var import_react36 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function buildContext(contextName, defaultContextValues) {
-  const Context = (0, import_react32.createContext)(defaultContextValues ?? void 0);
+  const Context = (0, import_react36.createContext)(defaultContextValues ?? void 0);
   function Provider({ children, ...contextValues }) {
-    const value = (0, import_react32.useMemo)(
+    const value = (0, import_react36.useMemo)(
       () => Object.keys(contextValues).length > 0 ? contextValues : null,
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [...Object.values(contextValues)]
@@ -1138,7 +1290,7 @@ function buildContext(contextName, defaultContextValues) {
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Context.Provider, { value, children });
   }
   function useInnerContext() {
-    const context = (0, import_react32.useContext)(Context);
+    const context = (0, import_react36.useContext)(Context);
     if (context != null) {
       return context;
     }
@@ -1212,7 +1364,9 @@ function mergeFunction(a, b) {
   useInputState,
   useIntersectionObserver,
   useInterval,
+  useIsClient,
   useIsomorphicLayoutEffect,
+  useList,
   useLoading,
   useLongPress,
   useMap,
@@ -1221,8 +1375,10 @@ function mergeFunction(a, b) {
   usePreservedReference,
   usePrevious,
   useRefEffect,
+  useSet,
   useStorageState,
   useThrottle,
+  useThrottledCallback,
   useTimeout,
   useToggle,
   useVisibilityEvent

package/dist/index.d.cts

@@ -15,7 +15,9 @@ export { useImpressionRef } from './hooks/useImpressionRef/index.cjs';
 export { useInputState } from './hooks/useInputState/index.cjs';
 export { useIntersectionObserver } from './hooks/useIntersectionObserver/index.cjs';
 export { useInterval } from './hooks/useInterval/index.cjs';
+export { useIsClient } from './hooks/useIsClient/index.cjs';
 export { useIsomorphicLayoutEffect } from './hooks/useIsomorphicLayoutEffect/index.cjs';
+export { useList } from './hooks/useList/index.cjs';
 export { useLoading } from './hooks/useLoading/index.cjs';
 export { useLongPress } from './hooks/useLongPress/index.cjs';
 export { useMap } from './hooks/useMap/index.cjs';
@@ -24,8 +26,10 @@ export { usePreservedCallback } from './hooks/usePreservedCallback/index.cjs';
 export { usePreservedReference } from './hooks/usePreservedReference/index.cjs';
 export { usePrevious } from './hooks/usePrevious/index.cjs';
 export { useRefEffect } from './hooks/useRefEffect/index.cjs';
+export { useSet } from './hooks/useSet/index.cjs';
 export { useStorageState } from './hooks/useStorageState/index.cjs';
 export { useThrottle } from './hooks/useThrottle/index.cjs';
+export { useThrottledCallback } from './hooks/useThrottledCallback/index.cjs';
 export { useTimeout } from './hooks/useTimeout/index.cjs';
 export { useToggle } from './hooks/useToggle/index.cjs';
 export { useVisibilityEvent } from './hooks/useVisibilityEvent/index.cjs';

package/esm/components/ImpressionArea/index.js

@@ -66,9 +66,12 @@ function debounce(func, debounceMs, { edges = ["leading", "trailing"] } = {}) {
 import { useCallback, useEffect, useRef } from "react";
 function usePreservedCallback(callback) {
   const callbackRef = useRef(callback);
-  useEffect(() => {
-    callbackRef.current = callback;
-  }, [callback]);
+  useEffect(
+    function syncCallbackRef() {
+      callbackRef.current = callback;
+    },
+    [callback]
+  );
   return useCallback((...args) => {
     return callbackRef.current(...args);
   }, []);
@@ -84,7 +87,7 @@ function useDebouncedCallback({
   const handleChange = usePreservedCallback(onChange);
   const ref = useRef2({ value: false, clearPreviousDebounce: () => {
   } });
-  useEffect2(() => {
+  useEffect2(function clearDebouncedOnUnmount() {
     const current = ref.current;
     return () => {
       current.clearPreviousDebounce();

package/esm/components/Separated/index.js

@@ -8,7 +8,7 @@ function Separated({ children, by: separator }) {
   return /* @__PURE__ */ jsx(Fragment2, { children: childrenArray.map((child, i, { length }) => /* @__PURE__ */ jsxs(Fragment, { children: [
     child,
     i + 1 !== length && separator
-  ] }, i)) });
+  ] }, child.key ?? i)) });
 }
 export {
   Separated

package/esm/hooks/useCallbackOncePerRender/index.js

@@ -7,9 +7,12 @@ import { useEffect as useEffect2, useRef as useRef2 } from "react";
 import { useCallback, useEffect, useRef } from "react";
 function usePreservedCallback(callback) {
   const callbackRef = useRef(callback);
-  useEffect(() => {
-    callbackRef.current = callback;
-  }, [callback]);
+  useEffect(
+    function syncCallbackRef() {
+      callbackRef.current = callback;
+    },
+    [callback]
+  );
   return useCallback((...args) => {
     return callbackRef.current(...args);
   }, []);