react-simplikit 0.0.52 → 0.0.53

package/README.md

@@ -27,7 +27,7 @@ We are repositioning react-simplikit to focus exclusively on **platform-independ
 Hooks that don't depend on specific platform APIs will continue to be actively maintained:
 
 - State management hooks like `useToggle`, `useBooleanState`, `useCounter`
-- Lifecycle hooks like `usePrevious`, `useMount`
+- Lifecycle hooks like `usePrevious`
 - Utility hooks like `useDebounce`, `useThrottle`
 - **Backward compatibility (BC) is preserved** for these existing pure logic hooks
 
@@ -69,37 +69,46 @@ pnpm add react-simplikit
 ## Quick Start
 
 ```tsx
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { useDebounce } from 'react-simplikit';
 
 function SearchInput() {
   const [query, setQuery] = useState('');
-  const debouncedQuery = useDebounce(query, 300);
 
-  useEffect(() => {
-    if (debouncedQuery) {
-      searchAPI(debouncedQuery);
-    }
-  }, [debouncedQuery]);
-
-  return <input value={query} onChange={e => setQuery(e.target.value)} />;
+  const debouncedSearch = useDebounce((value: string) => {
+    // Actual API call
+    searchAPI(value);
+  }, 300);
+
+  return (
+    <input
+      value={query}
+      onChange={e => {
+        setQuery(e.target.value);
+        debouncedSearch(e.target.value);
+      }}
+      placeholder="Enter search term"
+    />
+  );
 }
 ```
 
+The debounced function exposes `.cancel()`, and pending calls are cancelled automatically when the component unmounts.
+
 ## What's Included
 
 ### Hooks
 
-| Hook                      | Description                                         |
-| ------------------------- | --------------------------------------------------- |
-| `useBooleanState`         | Manage boolean state with handlers                  |
-| `useDebounce`             | Debounce a value                                    |
-| `useDebouncedCallback`    | Debounce a callback function                        |
-| `useInterval`             | Set up intervals declaratively                      |
-| `useIntersectionObserver` | Observe element visibility                          |
-| `usePreservedCallback`    | Stable callback reference                           |
-| `usePreservedReference`   | Stable object reference                             |
-| ...                       | [See all hooks](https://react-simplikit.slash.page) |
+| Hook                      | Description                                           |
+| ------------------------- | ----------------------------------------------------- |
+| `useBooleanState`         | Manage boolean state with handlers                    |
+| `useDebounce`             | Debounce a callback function                          |
+| `useDebouncedCallback`    | Debounce an `onChange` callback via an options object |
+| `useInterval`             | Set up intervals declaratively                        |
+| `useIntersectionObserver` | Observe element visibility                            |
+| `usePreservedCallback`    | Stable callback reference                             |
+| `usePreservedReference`   | Stable object reference                               |
+| ...                       | [See all hooks](https://react-simplikit.slash.page)   |
 
 ### Components
 
@@ -111,10 +120,11 @@ function SearchInput() {
 
 ### Utilities
 
-| Utility  | Description       |
-| -------- | ----------------- |
-| `assert` | Runtime assertion |
-| `noop`   | Empty function    |
+| Utility        | Description                                         |
+| -------------- | --------------------------------------------------- |
+| `buildContext` | Define React Context with less boilerplate          |
+| `mergeProps`   | Merge props, composing `className`, `style`, events |
+| `mergeRefs`    | Combine multiple refs into a single ref             |
 
 ## Documentation
 

package/dist/hooks/usePrevious/usePrevious.cjs

@@ -21,6 +21,7 @@ const strictEquals = (prev, next) => prev === next;
 * const previousCount = usePrevious(count);
 */
 function usePrevious(state, compare = strictEquals) {
+	"use no memo";
 	const prevRef = (0, react.useRef)(state);
 	const currentRef = (0, react.useRef)(state);
 	const isFirstRender = (0, react.useRef)(true);

package/dist/hooks/usePrevious/usePrevious.mjs

@@ -21,6 +21,7 @@ const strictEquals = (prev, next) => prev === next;
 * const previousCount = usePrevious(count);
 */
 function usePrevious(state, compare = strictEquals) {
+	"use no memo";
 	const prevRef = useRef(state);
 	const currentRef = useRef(state);
 	const isFirstRender = useRef(true);

package/dist/hooks/useThrottledCallback/useThrottledCallback.cjs

@@ -5,6 +5,14 @@ const require_throttle = require("../useThrottle/throttle.cjs");
 let react = require("react");
 //#region src/hooks/useThrottledCallback/useThrottledCallback.ts
 /**
+* Marks that no value has been forwarded to `onChange` yet.
+*
+* The hook skips redundant invocations by comparing against the last forwarded value, but it
+* receives no initial value from the caller. Seeding that comparison with `false` would treat the
+* first `false` as redundant and swallow it, so an unreachable sentinel is used instead.
+*/
+const NOT_INVOKED = Symbol("NOT_INVOKED");
+/**
 * @description
 * `useThrottledCallback` is a React hook that returns a throttled version of the provided callback function.
 * The throttled callback will only be invoked at most once per specified interval.
@@ -28,7 +36,7 @@ let react = require("react");
 function useThrottledCallback({ onChange, timeThreshold, edges = ["leading", "trailing"] }) {
 	const handleChange = require_usePreservedCallback.usePreservedCallback(onChange);
 	const ref = (0, react.useRef)({
-		value: false,
+		value: NOT_INVOKED,
 		clearPreviousThrottle: () => {}
 	});
 	(0, react.useEffect)(function cleanupThrottleOnUnmount() {

package/dist/hooks/useThrottledCallback/useThrottledCallback.mjs

@@ -5,6 +5,14 @@ import { throttle } from "../useThrottle/throttle.mjs";
 import { useCallback, useEffect, useRef } from "react";
 //#region src/hooks/useThrottledCallback/useThrottledCallback.ts
 /**
+* Marks that no value has been forwarded to `onChange` yet.
+*
+* The hook skips redundant invocations by comparing against the last forwarded value, but it
+* receives no initial value from the caller. Seeding that comparison with `false` would treat the
+* first `false` as redundant and swallow it, so an unreachable sentinel is used instead.
+*/
+const NOT_INVOKED = Symbol("NOT_INVOKED");
+/**
 * @description
 * `useThrottledCallback` is a React hook that returns a throttled version of the provided callback function.
 * The throttled callback will only be invoked at most once per specified interval.
@@ -28,7 +36,7 @@ import { useCallback, useEffect, useRef } from "react";
 function useThrottledCallback({ onChange, timeThreshold, edges = ["leading", "trailing"] }) {
 	const handleChange = usePreservedCallback(onChange);
 	const ref = useRef({
-		value: false,
+		value: NOT_INVOKED,
 		clearPreviousThrottle: () => {}
 	});
 	useEffect(function cleanupThrottleOnUnmount() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-simplikit",
-  "version": "0.0.52",
+  "version": "0.0.53",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.cts",