@1money/hooks 0.1.0

package/README.md

@@ -0,0 +1,53 @@
+# @1money/hooks
+
+React hooks for 1Money front-end projects.
+
+## Installation
+
+```bash
+pnpm add @1money/hooks
+```
+
+> Requires `react >= 16.8.0` as a peer dependency.
+
+## Hooks
+
+| Hook | Description |
+| --- | --- |
+| `useControlledState` | Manages state that can be either controlled (via props) or uncontrolled. |
+| `useEventCallback` | Returns a stable callback reference that always invokes the latest function. |
+| `useLatest` | Returns a ref that always holds the latest value, avoiding stale closures. |
+| `useLayoutEffect` | Wrapper around `useLayoutEffect` that indicates whether it's the initial mount. |
+| `useLayoutState` | Batches multiple state updates into a single microtask to reduce re-renders. |
+| `useMemoizedFn` | Returns a memoized function with a stable reference across re-renders. |
+| `usePrevious` | Returns the previous distinct value before the last change. |
+| `useSafeState` | Like `useState` but prevents updates after unmount. |
+| `useSyncState` | Returns a getter/setter where the getter always reflects the latest state synchronously. |
+| `useUpdateEffect` | Like `useEffect` but skips the initial mount. |
+
+## Usage
+
+```tsx
+import { useMemoizedFn, useLatest } from '@1money/hooks';
+```
+
+Individual hooks can also be imported directly for tree-shaking:
+
+```tsx
+import useMemoizedFn from '@1money/hooks/useMemoizedFn';
+```
+
+## Development
+
+```bash
+pnpm install
+pnpm dev       # watch mode
+pnpm build     # production build
+pnpm test      # run tests
+pnpm lint      # check formatting & linting
+pnpm lint:fix  # auto-fix
+```
+
+## License
+
+MIT

package/es/index.d.ts

@@ -0,0 +1,11 @@
+export { default as useControlledState } from './useControlledState';
+export { default as useEventCallback } from './useEventCallback';
+export { default as useLatest } from './useLatest';
+export { default as useLayoutEffect } from './useLayoutEffect';
+export { default as useMemoizedFn } from './useMemoizedFn';
+export { default as usePrevious } from './usePrevious';
+export { default as useSafeState } from './useSafeState';
+export { default as useSyncState } from './useSyncState';
+export { default as useUpdateEffect } from './useUpdateEffect';
+export { default as useLayoutState, useTimeoutLock } from './useLayoutState';
+export type { Updater } from './useLayoutState';

package/es/index.js

@@ -0,0 +1,11 @@
+// Hooks
+export { default as useControlledState } from "./useControlledState";
+export { default as useEventCallback } from "./useEventCallback";
+export { default as useLatest } from "./useLatest";
+export { default as useLayoutEffect } from "./useLayoutEffect";
+export { default as useMemoizedFn } from "./useMemoizedFn";
+export { default as usePrevious } from "./usePrevious";
+export { default as useSafeState } from "./useSafeState";
+export { default as useSyncState } from "./useSyncState";
+export { default as useUpdateEffect } from "./useUpdateEffect";
+export { default as useLayoutState, useTimeoutLock } from "./useLayoutState";

package/es/useControlledState/index.d.ts

@@ -0,0 +1,14 @@
+type Updater<T> = (updater: T | ((origin: T) => T)) => void;
+/**
+ * Similar to `useState` but will use props value if provided.
+ * From React 18, we do not need safe `useState` since it will not throw for unmounted update.
+ * This hook removes the `onChange` & `postState` logic since we only need basic merged state logic.
+ *
+ * The `mergedValue` return already reflects the latest controlled `value` without
+ * the layout effect. The effect exists to sync `innerValue` for the edge case where
+ * the component starts in uncontrolled mode (calling `setInnerValue` directly) and
+ * then transitions to controlled mode (parent starts providing `value`). Without this
+ * sync, reverting back to uncontrolled mode would show the stale `innerValue`.
+ */
+export default function useControlledState<T>(defaultStateValue: T | (() => T), value?: T): [T, Updater<T>];
+export {};

package/es/useControlledState/index.js

@@ -0,0 +1,36 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useState } from 'react';
+import useLayoutEffect from "../useLayoutEffect";
+/**
+ * Similar to `useState` but will use props value if provided.
+ * From React 18, we do not need safe `useState` since it will not throw for unmounted update.
+ * This hook removes the `onChange` & `postState` logic since we only need basic merged state logic.
+ *
+ * The `mergedValue` return already reflects the latest controlled `value` without
+ * the layout effect. The effect exists to sync `innerValue` for the edge case where
+ * the component starts in uncontrolled mode (calling `setInnerValue` directly) and
+ * then transitions to controlled mode (parent starts providing `value`). Without this
+ * sync, reverting back to uncontrolled mode would show the stale `innerValue`.
+ */
+export default function useControlledState(defaultStateValue, value) {
+  var _useState = useState(defaultStateValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    innerValue = _useState2[0],
+    setInnerValue = _useState2[1];
+  var mergedValue = value !== undefined ? value : innerValue;
+  useLayoutEffect(function (mount) {
+    if (!mount && value !== undefined) {
+      setInnerValue(value);
+    }
+  }, [value]);
+  return [
+  // Value
+  mergedValue,
+  // Update function
+  setInnerValue];
+}

package/es/useEventCallback/index.d.ts

@@ -0,0 +1,11 @@
+type Fn<T extends unknown[], R> = (...args: T) => R;
+/**
+ * A hook that returns a stable callback reference that always invokes
+ * the latest version of the provided function. Similar to the React
+ * useEvent RFC proposal.
+ *
+ * @param fn The function to wrap
+ * @returns A stable callback that always calls the latest fn
+ */
+export default function useEventCallback<T extends unknown[], R>(fn: Fn<T, R>): Fn<T, R>;
+export {};

package/es/useEventCallback/index.js

@@ -0,0 +1,16 @@
+import { useCallback } from 'react';
+import useLatest from "../useLatest";
+/**
+ * A hook that returns a stable callback reference that always invokes
+ * the latest version of the provided function. Similar to the React
+ * useEvent RFC proposal.
+ *
+ * @param fn The function to wrap
+ * @returns A stable callback that always calls the latest fn
+ */
+export default function useEventCallback(fn) {
+  var fnRef = useLatest(fn);
+  return useCallback(function () {
+    return fnRef.current.apply(fnRef, arguments);
+  }, []);
+}

package/es/useLatest/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * A hook that returns a ref object whose `.current` property is always
+ * updated to the latest value. Useful for accessing the latest value
+ * in callbacks without causing re-renders or stale closures.
+ *
+ * @param value The value to keep up-to-date
+ * @returns A ref object containing the latest value
+ */
+export default function useLatest<T>(value: T): import("react").RefObject<T>;

package/es/useLatest/index.js

@@ -0,0 +1,15 @@
+import { useRef } from 'react';
+
+/**
+ * A hook that returns a ref object whose `.current` property is always
+ * updated to the latest value. Useful for accessing the latest value
+ * in callbacks without causing re-renders or stale closures.
+ *
+ * @param value The value to keep up-to-date
+ * @returns A ref object containing the latest value
+ */
+export default function useLatest(value) {
+  var ref = useRef(value);
+  ref.current = value;
+  return ref;
+}

package/es/useLayoutEffect/index.d.ts

@@ -0,0 +1,11 @@
+import { type DependencyList } from 'react';
+type EffectCallback = (mount: boolean) => void | (() => void);
+/**
+ * A custom `useLayoutEffect` that passes a boolean indicating whether
+ * it's the initial mount (`true`) or a subsequent update (`false`).
+ *
+ * @param effect The effect callback that receives a `mount` parameter
+ * @param deps The dependency array
+ */
+export default function useLayoutEffect(effect: EffectCallback, deps?: DependencyList): void;
+export {};

package/es/useLayoutEffect/index.js

@@ -0,0 +1,16 @@
+import { useLayoutEffect as reactUseLayoutEffect, useRef } from 'react';
+/**
+ * A custom `useLayoutEffect` that passes a boolean indicating whether
+ * it's the initial mount (`true`) or a subsequent update (`false`).
+ *
+ * @param effect The effect callback that receives a `mount` parameter
+ * @param deps The dependency array
+ */
+export default function useLayoutEffect(effect, deps) {
+  var isMounted = useRef(false);
+  reactUseLayoutEffect(function () {
+    var mount = !isMounted.current;
+    isMounted.current = true;
+    return effect(mount);
+  }, deps);
+}

package/es/useLayoutState/index.d.ts

@@ -0,0 +1,13 @@
+export type Updater<State> = (prev: State) => State;
+/**
+ * Execute code before next frame but async.
+ *
+ * Batches multiple state updates into a single microtask (via `Promise.resolve`),
+ * reducing unnecessary re-renders when multiple updates happen synchronously.
+ *
+ * @param defaultState The initial state value
+ * @returns A tuple of `[state, setFrameState]`
+ */
+export default function useLayoutState<State>(defaultState: State): [State, (updater: Updater<State>) => void];
+/** Lock frame, when frame pass reset the lock. */
+export declare function useTimeoutLock<State>(defaultState?: State): [(state: State) => void, () => State | null];

package/es/useLayoutState/index.js

@@ -0,0 +1,76 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useRef, useState, useEffect, useCallback } from 'react';
+/**
+ * Execute code before next frame but async.
+ *
+ * Batches multiple state updates into a single microtask (via `Promise.resolve`),
+ * reducing unnecessary re-renders when multiple updates happen synchronously.
+ *
+ * @param defaultState The initial state value
+ * @returns A tuple of `[state, setFrameState]`
+ */
+export default function useLayoutState(defaultState) {
+  var stateRef = useRef(defaultState);
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    forceUpdate = _useState2[1];
+  var lastPromiseRef = useRef(null);
+  var updateBatchRef = useRef([]);
+  var setFrameState = useCallback(function (updater) {
+    updateBatchRef.current.push(updater);
+    var promise = Promise.resolve();
+    lastPromiseRef.current = promise;
+    promise.then(function () {
+      if (lastPromiseRef.current === promise) {
+        var prevBatch = updateBatchRef.current;
+        var prevState = stateRef.current;
+        updateBatchRef.current = [];
+        prevBatch.forEach(function (batchUpdater) {
+          stateRef.current = batchUpdater(stateRef.current);
+        });
+        lastPromiseRef.current = null;
+        if (prevState !== stateRef.current) {
+          forceUpdate({});
+        }
+      }
+    });
+  }, []);
+  useEffect(function () {
+    return function () {
+      lastPromiseRef.current = null;
+    };
+  }, []);
+  return [stateRef.current, setFrameState];
+}
+
+/** Lock frame, when frame pass reset the lock. */
+export function useTimeoutLock(defaultState) {
+  var frameRef = useRef(defaultState !== null && defaultState !== void 0 ? defaultState : null);
+  var timeoutRef = useRef(null);
+  function cleanUp() {
+    if (timeoutRef.current != null) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }
+  function setState(newState) {
+    frameRef.current = newState;
+    cleanUp();
+    timeoutRef.current = setTimeout(function () {
+      frameRef.current = null;
+      timeoutRef.current = null;
+    }, 100);
+  }
+  function getState() {
+    return frameRef.current;
+  }
+  useEffect(function () {
+    return cleanUp;
+  }, []);
+  return [setState, getState];
+}

package/es/useMemoizedFn/index.d.ts

@@ -0,0 +1,12 @@
+type Fn<T extends unknown[], R> = (...args: T) => R;
+/**
+ * A hook that returns a memoized version of a callback function.
+ * Unlike `useCallback`, it maintains referential equality across renders
+ * without requiring a dependency array, while always calling the latest
+ * version of the function.
+ *
+ * @param fn The function to memoize
+ * @returns A memoized function with stable reference
+ */
+export default function useMemoizedFn<T extends unknown[], R>(fn: Fn<T, R>): Fn<T, R>;
+export {};

package/es/useMemoizedFn/index.js

@@ -0,0 +1,26 @@
+import { useMemo, useRef } from 'react';
+/**
+ * A hook that returns a memoized version of a callback function.
+ * Unlike `useCallback`, it maintains referential equality across renders
+ * without requiring a dependency array, while always calling the latest
+ * version of the function.
+ *
+ * @param fn The function to memoize
+ * @returns A memoized function with stable reference
+ */
+export default function useMemoizedFn(fn) {
+  var fnRef = useRef(fn);
+  fnRef.current = useMemo(function () {
+    return fn;
+  }, [fn]);
+  var memoizedFn = useRef(undefined);
+  if (!memoizedFn.current) {
+    memoizedFn.current = function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      return fnRef.current.apply(this, args);
+    };
+  }
+  return memoizedFn.current;
+}

package/es/usePrevious/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Returns the last distinct value observed before the current `value`.
+ *
+ * Because the internal effect depends on `[value]`, the ref is only updated
+ * when `value` changes. That means this hook tracks the previous value on
+ * value-change boundaries (not every render).
+ *
+ * @param value The value to track
+ * @returns The previous distinct value, or `undefined` until one exists
+ */
+export default function usePrevious<T>(value: T): T | undefined;

package/es/usePrevious/index.js

@@ -0,0 +1,19 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * Returns the last distinct value observed before the current `value`.
+ *
+ * Because the internal effect depends on `[value]`, the ref is only updated
+ * when `value` changes. That means this hook tracks the previous value on
+ * value-change boundaries (not every render).
+ *
+ * @param value The value to track
+ * @returns The previous distinct value, or `undefined` until one exists
+ */
+export default function usePrevious(value) {
+  var ref = useRef(undefined);
+  useEffect(function () {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}

package/es/useSafeState/index.d.ts

@@ -0,0 +1,12 @@
+import { type Dispatch, type SetStateAction } from 'react';
+/**
+ * It is exactly the same as `React.useState`, but after the component is unmounted,
+ * the setState in the asynchronous callback will no longer be executed to avoid
+ * memory leakage caused by updating the state after the component is unmounted.
+ *
+ * @param initialState The initial state value or initializer function
+ * @returns A tuple of [state, setSafeState] similar to useState
+ */
+declare function useSafeState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];
+declare function useSafeState<S = undefined>(): [S | undefined, Dispatch<SetStateAction<S | undefined>>];
+export default useSafeState;

package/es/useSafeState/index.js

@@ -0,0 +1,40 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useState, useCallback, useRef, useEffect } from 'react';
+
+/**
+ * It is exactly the same as `React.useState`, but after the component is unmounted,
+ * the setState in the asynchronous callback will no longer be executed to avoid
+ * memory leakage caused by updating the state after the component is unmounted.
+ *
+ * @param initialState The initial state value or initializer function
+ * @returns A tuple of [state, setSafeState] similar to useState
+ */
+
+// eslint-disable-next-line no-redeclare
+
+// eslint-disable-next-line no-redeclare
+function useSafeState(initialState) {
+  var isMountedRef = useRef(true);
+  var _useState = useState(initialState),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  useEffect(function () {
+    isMountedRef.current = true;
+    return function () {
+      isMountedRef.current = false;
+    };
+  }, []);
+  var setSafeState = useCallback(function (value) {
+    if (isMountedRef.current) {
+      setState(value);
+    }
+  }, []);
+  return [state, setSafeState];
+}
+export default useSafeState;

package/es/useSyncState/index.d.ts

@@ -0,0 +1,14 @@
+import { type SetStateAction } from 'react';
+type GetState<T> = () => T;
+type SetState<T> = (value: SetStateAction<T>) => void;
+/**
+ * Same as `React.useState` but will always get the latest state.
+ * This is useful when React merges multiple state updates into one.
+ * e.g. `onTransitionEnd` triggers multiple events at once that will be merged
+ * into a single state update in React.
+ *
+ * @param initialState The initial state value or initializer function
+ * @returns A tuple of [getState, setState] where getState always returns the latest value
+ */
+export default function useSyncState<T>(initialState: T | (() => T)): [GetState<T>, SetState<T>];
+export {};

package/es/useSyncState/index.js

@@ -0,0 +1,43 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useState, useRef } from 'react';
+import useEventCallback from "../useEventCallback";
+/** Sentinel value distinguishing "not yet initialized" from any valid state, including `null`. */
+var UNINITIALIZED = Symbol('useSyncState.uninitialized');
+
+/**
+ * Same as `React.useState` but will always get the latest state.
+ * This is useful when React merges multiple state updates into one.
+ * e.g. `onTransitionEnd` triggers multiple events at once that will be merged
+ * into a single state update in React.
+ *
+ * @param initialState The initial state value or initializer function
+ * @returns A tuple of [getState, setState] where getState always returns the latest value
+ */
+export default function useSyncState(initialState) {
+  var stateRef = useRef(UNINITIALIZED);
+
+  // Initialize ref on first render
+  if (stateRef.current === UNINITIALIZED) {
+    stateRef.current = typeof initialState === 'function' ? initialState() : initialState;
+  }
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    forceUpdate = _useState2[1];
+  var getState = useEventCallback(function () {
+    return stateRef.current;
+  });
+  var setState = useEventCallback(function (value) {
+    var prevState = stateRef.current;
+    var nextState = typeof value === 'function' ? value(prevState) : value;
+    if (!Object.is(prevState, nextState)) {
+      stateRef.current = nextState;
+      forceUpdate({});
+    }
+  });
+  return [getState, setState];
+}

package/es/useUpdateEffect/index.d.ts

@@ -0,0 +1,9 @@
+import { type DependencyList, type EffectCallback } from 'react';
+/**
+ * A hook identical to `useEffect`, but it skips the effect on the initial mount
+ * and only runs on subsequent updates.
+ *
+ * @param effect The effect callback to run on updates
+ * @param deps The dependency array
+ */
+export default function useUpdateEffect(effect: EffectCallback, deps?: DependencyList): void;

package/es/useUpdateEffect/index.js

@@ -0,0 +1,19 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * A hook identical to `useEffect`, but it skips the effect on the initial mount
+ * and only runs on subsequent updates.
+ *
+ * @param effect The effect callback to run on updates
+ * @param deps The dependency array
+ */
+export default function useUpdateEffect(effect, deps) {
+  var isMounted = useRef(false);
+  useEffect(function () {
+    if (!isMounted.current) {
+      isMounted.current = true;
+      return;
+    }
+    return effect();
+  }, deps);
+}

package/lib/index.d.ts

@@ -0,0 +1,11 @@
+export { default as useControlledState } from './useControlledState';
+export { default as useEventCallback } from './useEventCallback';
+export { default as useLatest } from './useLatest';
+export { default as useLayoutEffect } from './useLayoutEffect';
+export { default as useMemoizedFn } from './useMemoizedFn';
+export { default as usePrevious } from './usePrevious';
+export { default as useSafeState } from './useSafeState';
+export { default as useSyncState } from './useSyncState';
+export { default as useUpdateEffect } from './useUpdateEffect';
+export { default as useLayoutState, useTimeoutLock } from './useLayoutState';
+export type { Updater } from './useLayoutState';

package/lib/index.js

@@ -0,0 +1,68 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  useControlledState: () => import_useControlledState.default,
+  useEventCallback: () => import_useEventCallback.default,
+  useLatest: () => import_useLatest.default,
+  useLayoutEffect: () => import_useLayoutEffect.default,
+  useLayoutState: () => import_useLayoutState.default,
+  useMemoizedFn: () => import_useMemoizedFn.default,
+  usePrevious: () => import_usePrevious.default,
+  useSafeState: () => import_useSafeState.default,
+  useSyncState: () => import_useSyncState.default,
+  useTimeoutLock: () => import_useLayoutState.useTimeoutLock,
+  useUpdateEffect: () => import_useUpdateEffect.default
+});
+module.exports = __toCommonJS(src_exports);
+var import_useControlledState = __toESM(require("./useControlledState"));
+var import_useEventCallback = __toESM(require("./useEventCallback"));
+var import_useLatest = __toESM(require("./useLatest"));
+var import_useLayoutEffect = __toESM(require("./useLayoutEffect"));
+var import_useMemoizedFn = __toESM(require("./useMemoizedFn"));
+var import_usePrevious = __toESM(require("./usePrevious"));
+var import_useSafeState = __toESM(require("./useSafeState"));
+var import_useSyncState = __toESM(require("./useSyncState"));
+var import_useUpdateEffect = __toESM(require("./useUpdateEffect"));
+var import_useLayoutState = __toESM(require("./useLayoutState"));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useControlledState,
+  useEventCallback,
+  useLatest,
+  useLayoutEffect,
+  useLayoutState,
+  useMemoizedFn,
+  usePrevious,
+  useSafeState,
+  useSyncState,
+  useTimeoutLock,
+  useUpdateEffect
+});

package/lib/useControlledState/index.d.ts

@@ -0,0 +1,14 @@
+type Updater<T> = (updater: T | ((origin: T) => T)) => void;
+/**
+ * Similar to `useState` but will use props value if provided.
+ * From React 18, we do not need safe `useState` since it will not throw for unmounted update.
+ * This hook removes the `onChange` & `postState` logic since we only need basic merged state logic.
+ *
+ * The `mergedValue` return already reflects the latest controlled `value` without
+ * the layout effect. The effect exists to sync `innerValue` for the edge case where
+ * the component starts in uncontrolled mode (calling `setInnerValue` directly) and
+ * then transitions to controlled mode (parent starts providing `value`). Without this
+ * sync, reverting back to uncontrolled mode would show the stale `innerValue`.
+ */
+export default function useControlledState<T>(defaultStateValue: T | (() => T), value?: T): [T, Updater<T>];
+export {};