@faasjs/react 8.0.0-beta.13 → 8.0.0-beta.15

package/README.md

@@ -1,46 +1,5 @@
 # @faasjs/react
 
-React plugin for FaasJS.
-
-[![License: MIT](https://img.shields.io/npm/l/@faasjs/react.svg)](https://github.com/faasjs/faasjs/blob/main/packages/react/LICENSE)
-[![NPM Version](https://img.shields.io/npm/v/@faasjs/react.svg)](https://www.npmjs.com/package/@faasjs/react)
-
-Includes browser client utilities (`FaasBrowserClient`, `ResponseError`, `setMock`) and React helpers.
-
-## Features
-
-- Support [FaasJS Request Specifications](https://faasjs.com/guide/request-spec.html).
-- Support global and per-request configurations.
-- Compatible with [why-did-you-render](https://github.com/welldone-software/why-did-you-render).
-- Additional React functions:
-  - Utils:
-    - `equal`: Compare two values for deep equality.
-    - `createSplittingContext`: Create a context for code splitting.
-    - `useSplittingState`: Create splitting states.
-  - Hooks:
-    - `useEqualMemoize`: Memoize a value with deep equality.
-    - `useEqualEffect`: Run an effect with deep equality.
-    - `useEqualMemo`: Memoize a value with deep equality.
-    - `useEqualCallback`: Memoize a callback with deep equality.
-    - `useConstant`: Create a constant value with hooks.
-    - `usePrevious`: Get the previous value of a state.
-    - `useStateRef`: Create a state with a ref.
-  - Components:
-    - `OptionalWrapper`: Render a component optionally.
-    - `ErrorBoundary`: Catch errors in the component tree.
-  - Fetch Data:
-    - `faas`: Fetch data from FaasJS.
-    - `useFaas`: Fetch data from FaasJS with hooks.
-    - `useFaasStream`: Fetch streaming data from FaasJS with hooks.
-    - `FaasDataWrapper`: Fetch data from FaasJS with a wrapper component.
-    - `withFaasData`: Fetch data from FaasJS using a higher-order component (HOC).
-
-## Install
-
-```sh
-npm install @faasjs/react react
-```
-
 ## Functions
 
 - [createSplittingContext](functions/createSplittingContext.md)

package/dist/index.cjs

@@ -1,7 +1,6 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-
 //#region src/generateId.ts
 /**
 * Generate random id with prefix
@@ -18,7 +17,6 @@ function generateId(prefix = "", length = 18) {
 	if (length < 8 || length > 18) throw new Error("Length must be 8 ~ 18");
 	return `${prefix}${Date.now().toString(36).padStart(8, "0")}${Math.random().toString(36).substring(2, length - 6).padEnd(length - 8, "0")}`;
 }
-
 //#endregion
 //#region src/browser.ts
 /**
@@ -41,7 +39,7 @@ function generateId(prefix = "", length = 18) {
 * @param {ResponseProps<T>} [props] - Response properties including status, headers, body, and data.
 *   All properties are optional with sensible defaults.
 *
-* @remarks
+* Notes:
 * - status defaults to 200 if data or body is present, 204 otherwise
 * - body is automatically populated from data if not explicitly provided
 * - headers defaults to an empty object if not provided
@@ -159,7 +157,7 @@ var Response = class {
 * including HTTP status code, response headers, response body, and the original error.
 *
 * @class ResponseError
-* @extends {Error}
+* @augments Error
 *
 * @property {number} status - The HTTP status code of the failed response. Defaults to 500 if not provided.
 * @property {ResponseHeaders} headers - The response headers from the failed request.
@@ -240,7 +238,7 @@ var Response = class {
 * })
 * ```
 *
-* @remarks
+* Notes:
 * - ResponseError is automatically thrown by the action method when the server returns an error (status >= 400)
 * - The error message from server responses is extracted from body.error.message if available
 * - When created from an Error object, the original error is preserved in the originalError property
@@ -263,7 +261,7 @@ var ResponseError = class extends Error {
 			message: data,
 			...options
 		};
-		else if (data instanceof Error || data?.constructor?.name?.includes("Error")) props = {
+		else if (data instanceof Error || typeof data === "object" && data !== null && typeof data.constructor?.name === "string" && data.constructor.name.includes("Error")) props = {
 			message: data.message,
 			originalError: data,
 			...options
@@ -346,7 +344,7 @@ function setMock(handler) {
 * - Streaming support for large responses
 * - Multiple instance support with unique IDs
 *
-* @remarks
+* Notes:
 * - All requests are POST requests by default
 * - Automatically adds X-FaasJS-Request-Id header for request tracking
 * - baseUrl must end with '/' (will throw Error if not)
@@ -490,7 +488,7 @@ var FaasBrowserClient = class {
 	* @throws {ResponseError} When the server returns an error response (status >= 400 or body.error exists)
 	* @throws {NetworkError} When network request fails
 	*
-	* @remarks
+	* Notes:
 	* - All requests are POST requests by default
 	* - Action path is automatically converted to lowercase
 	* - A unique request ID is generated for each request and sent in X-FaasJS-Request-Id header
@@ -649,7 +647,7 @@ var FaasBrowserClient = class {
 						headers,
 						body
 					}));
-				} catch (_) {
+				} catch {
 					return Promise.reject(new ResponseError({
 						message: res,
 						status: response.status,
@@ -661,7 +659,6 @@ var FaasBrowserClient = class {
 		});
 	}
 };
-
 //#endregion
 //#region src/faas.ts
 /**
@@ -687,7 +684,6 @@ async function faas(action, params, options) {
 	});
 	return client.browserClient.action(action, params, options);
 }
-
 //#endregion
 //#region src/equal.ts
 const AsyncFunction = (async () => {}).constructor;
@@ -737,13 +733,18 @@ function equal(a, b) {
 * @returns The memoized value.
 */
 function useEqualMemoize(value) {
+	const ref = (0, react.useRef)(value);
+	if (!equal(value, ref.current)) ref.current = value;
+	return ref.current;
+}
+function useEqualSignal(value) {
 	const ref = (0, react.useRef)(value);
 	const signalRef = (0, react.useRef)(0);
 	if (!equal(value, ref.current)) {
 		ref.current = value;
 		signalRef.current += 1;
 	}
-	return (0, react.useMemo)(() => ref.current, [signalRef.current]);
+	return signalRef.current;
 }
 /**
 * Custom hook that works like `useEffect` but uses deep comparison on dependencies.
@@ -753,7 +754,7 @@ function useEqualMemoize(value) {
 * @returns The result of the `useEffect` hook with memoized dependencies.
 */
 function useEqualEffect(callback, dependencies) {
-	return (0, react.useEffect)(callback, useEqualMemoize(dependencies));
+	return (0, react.useEffect)(callback, [useEqualSignal(dependencies)]);
 }
 /**
 * Custom hook that works like `useMemo` but uses deep comparison on dependencies.
@@ -763,7 +764,12 @@ function useEqualEffect(callback, dependencies) {
 * @returns The result of the `useMemo` hook with memoized dependencies.
 */
 function useEqualMemo(callback, dependencies) {
-	return (0, react.useMemo)(callback, useEqualMemoize(dependencies));
+	const signal = useEqualSignal(dependencies);
+	const callbackRef = (0, react.useRef)(callback);
+	callbackRef.current = callback;
+	return (0, react.useMemo)(() => {
+		return callbackRef.current();
+	}, [signal]);
 }
 /**
 * Custom hook that works like `useCallback` but uses deep comparison on dependencies.
@@ -773,9 +779,8 @@ function useEqualMemo(callback, dependencies) {
 * @returns The result of the `useCallback` hook with memoized dependencies.
 */
 function useEqualCallback(callback, dependencies) {
-	return (0, react.useCallback)((...args) => callback(...args), useEqualMemoize(dependencies));
+	return (0, react.useCallback)((...args) => callback(...args), [useEqualSignal(dependencies)]);
 }
-
 //#endregion
 //#region src/FaasDataWrapper.tsx
 const fixedForwardRef = react.forwardRef;
@@ -823,7 +828,6 @@ function withFaasData(Component, faasProps) {
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, { ...props })
 	});
 }
-
 //#endregion
 //#region src/useFaas.tsx
 /**
@@ -877,7 +881,8 @@ function useFaas(action, defaultParams, options = {}) {
 				const nextData = r.data;
 				setFails(0);
 				setError(null);
-				options.setData ? options.setData(nextData) : localSetData(nextData);
+				if (options.setData) options.setData(nextData);
+				else localSetData(nextData);
 				setLoading(false);
 				for (const { resolve } of pendingReloadsRef.current.values()) resolve(nextData);
 				pendingReloadsRef.current.clear();
@@ -951,7 +956,6 @@ function useFaas(action, defaultParams, options = {}) {
 		setError
 	};
 }
-
 //#endregion
 //#region src/client.tsx
 const clients = {};
@@ -1012,7 +1016,6 @@ function getClient(host) {
 	}
 	return client;
 }
-
 //#endregion
 //#region src/constant.ts
 /**
@@ -1023,7 +1026,6 @@ function useConstant(fn) {
 	if (!ref.current) ref.current = { v: fn() };
 	return ref.current.v;
 }
-
 //#endregion
 //#region src/ErrorBoundary.tsx
 var ErrorBoundary = class extends react.Component {
@@ -1058,7 +1060,6 @@ var ErrorBoundary = class extends react.Component {
 		return this.props.children ?? null;
 	}
 };
-
 //#endregion
 //#region src/useStateRef.ts
 /**
@@ -1095,7 +1096,6 @@ function useStateRef(initialValue) {
 		ref
 	];
 }
-
 //#endregion
 //#region src/splittingState.tsx
 /**
@@ -1124,7 +1124,6 @@ function useSplittingState(initialStates) {
 	}
 	return states;
 }
-
 //#endregion
 //#region src/splittingContext.tsx
 /**
@@ -1207,7 +1206,6 @@ function createSplittingContext(defaultValue) {
 		use
 	};
 }
-
 //#endregion
 //#region src/Form/context.tsx
 const FormContext = createSplittingContext([
@@ -1226,7 +1224,6 @@ const FormContext = createSplittingContext([
 ]);
 const FormContextProvider = FormContext.Provider;
 const useFormContext = FormContext.use;
-
 //#endregion
 //#region src/Form/Input.tsx
 function processValue(input, rules) {
@@ -1259,7 +1256,6 @@ function FormInput({ name, rules, ...rest }) {
 	});
 }
 FormInput.displayName = "FormInput";
-
 //#endregion
 //#region src/Form/Item.tsx
 function FormItem(props) {
@@ -1276,7 +1272,6 @@ function FormItem(props) {
 	});
 }
 FormItem.displayName = "FormItem";
-
 //#endregion
 //#region src/Form/Body.tsx
 function FormBody() {
@@ -1284,7 +1279,6 @@ function FormBody() {
 	return items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormItem, { ...item }, item.name));
 }
 FormBody.displayName = "FormBody";
-
 //#endregion
 //#region src/Form/elements/Button.tsx
 const FormButtonElement = (0, react.forwardRef)(({ children, submit, submitting, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
@@ -1296,7 +1290,6 @@ const FormButtonElement = (0, react.forwardRef)(({ children, submit, submitting,
 	children
 }));
 FormButtonElement.displayName = "FormButtonElement";
-
 //#endregion
 //#region src/Form/elements/Input.tsx
 const FormInputElement = (0, react.forwardRef)(({ onChange, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
@@ -1305,7 +1298,6 @@ const FormInputElement = (0, react.forwardRef)(({ onChange, ...props }, ref) =>
 	ref
 }));
 FormInputElement.displayName = "FormInputElement";
-
 //#endregion
 //#region src/Form/elements/Label.tsx
 const FormLabelElement = ({ name, title, description, error, children }) => {
@@ -1320,7 +1312,6 @@ const FormLabelElement = ({ name, title, description, error, children }) => {
 	] });
 };
 FormLabelElement.displayName = "FormLabelElement";
-
 //#endregion
 //#region src/Form/elements/index.ts
 const FormDefaultElements = {
@@ -1328,7 +1319,6 @@ const FormDefaultElements = {
 	Input: FormInputElement,
 	Button: FormButtonElement
 };
-
 //#endregion
 //#region src/Form/rules.ts
 /**
@@ -1366,42 +1356,36 @@ async function validValues(rules, items, values, lang) {
 	}
 	return errors;
 }
-
 //#endregion
 //#region src/Form/Footer.tsx
 function FormFooter() {
 	const { submitting, setSubmitting, onSubmit, valuesRef, Elements, items, setErrors, lang, rules } = useFormContext();
-	const handleSubmit = (0, react.useCallback)(async () => {
-		setSubmitting(true);
-		setErrors({});
-		const errors = await validValues(rules, items, valuesRef.current, lang);
-		if (Object.keys(errors).length) {
-			setErrors(errors);
-			setSubmitting(false);
-			return;
-		}
-		onSubmit(valuesRef.current).finally(() => setSubmitting(false));
-	}, [
-		setSubmitting,
-		setErrors,
-		rules,
-		items,
-		lang,
-		onSubmit
-	]);
-	return (0, react.useMemo)(() => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Elements.Button, {
+	const Button = Elements.Button;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 		submitting,
-		submit: handleSubmit,
+		submit: (0, react.useCallback)(async () => {
+			setSubmitting(true);
+			setErrors({});
+			const errors = await validValues(rules, items, valuesRef.current, lang);
+			if (Object.keys(errors).length) {
+				setErrors(errors);
+				setSubmitting(false);
+				return;
+			}
+			onSubmit(valuesRef.current).finally(() => setSubmitting(false));
+		}, [
+			setSubmitting,
+			setErrors,
+			rules,
+			items,
+			valuesRef,
+			lang,
+			onSubmit
+		]),
 		children: lang.submit
-	}), [
-		submitting,
-		handleSubmit,
-		lang.submit,
-		Elements.Button
-	]);
+	});
 }
 FormFooter.displayName = "FormFooter";
-
 //#endregion
 //#region src/Form/lang.ts
 const FormDefaultLang = {
@@ -1410,7 +1394,6 @@ const FormDefaultLang = {
 	string: "This field must be a string",
 	number: "This field must be a number"
 };
-
 //#endregion
 //#region src/Form/Container.tsx
 function mergeValues(items, defaultValues = {}) {
@@ -1470,7 +1453,6 @@ function FormContainer({ defaultValues, Elements, rules, lang, items, ...props }
 	});
 }
 FormContainer.displayName = "FormContainer";
-
 //#endregion
 //#region src/OptionalWrapper.tsx
 /**
@@ -1499,7 +1481,6 @@ function OptionalWrapper({ condition, Wrapper, wrapperProps, children }) {
 	return children;
 }
 OptionalWrapper.displayName = "OptionalWrapper";
-
 //#endregion
 //#region src/useFaasStream.tsx
 /**
@@ -1645,7 +1626,6 @@ function useFaasStream(action, defaultParams, options = {}) {
 		setError
 	};
 }
-
 //#endregion
 //#region src/usePrevious.ts
 /**
@@ -1662,7 +1642,6 @@ function usePrevious(value) {
 	});
 	return ref.current;
 }
-
 //#endregion
 exports.ErrorBoundary = ErrorBoundary;
 exports.FaasBrowserClient = FaasBrowserClient;
@@ -1696,4 +1675,4 @@ exports.usePrevious = usePrevious;
 exports.useSplittingState = useSplittingState;
 exports.useStateRef = useStateRef;
 exports.validValues = validValues;
-exports.withFaasData = withFaasData;
+exports.withFaasData = withFaasData;

package/dist/index.d.ts

@@ -24,7 +24,7 @@ declare function generateId(prefix?: string, length?: number): string;
  * Ensures that base URLs used in FaasJS requests always have a trailing '/' character,
  * which is required for proper URL construction when appending action paths.
  *
- * @remarks
+ * Notes:
  * - Type only accepts strings ending with '/' (e.g., 'https://api.example.com/', '/')
  * - Strings without trailing '/' will fail TypeScript type checking
  * - Used by FaasBrowserClient constructor and Options type
@@ -41,7 +41,7 @@ type BaseUrl = `${string}/`;
  * Extends the standard RequestInit interface with FaasJS-specific options for
  * customizing request behavior, adding request hooks, and overriding defaults.
  *
- * @remarks
+ * Notes:
  * - Options can be provided at client creation (defaultOptions) or per-request
  * - Per-request options override client default options
  * - headers are merged: per-request headers override default headers
@@ -73,7 +73,7 @@ type BaseUrl = `${string}/`;
  *   Useful for processing large data incrementally or working with binary data streams.
  *   When false or undefined, returns a wrapped Response with automatic JSON parsing.
  *
- * @extends RequestInit
+ * @augments RequestInit
  * @see FaasBrowserClient for client creation
  * @see Response for response object structure
  */
@@ -103,7 +103,7 @@ type Options = RequestInit & {
  * @property {string} [key] - Dynamic string keys for header names (e.g., 'Content-Type', 'Authorization').
  *   Values must be strings. Multiple values for the same key are not supported.
  *
- * @remarks
+ * Notes:
  * - Headers are case-insensitive in HTTP but stored with exact casing in this object
  * - Common headers include: Content-Type, Authorization, X-Request-Id, X-Custom-Header
  * - No support for multi-value headers (use comma-separated values instead)
@@ -131,7 +131,7 @@ type ResponseHeaders = {
  *
  * @returns {Promise<Response<FaasData<PathOrData>> | Response>} - A Promise resolving to a Response object
  *
- * @remarks
+ * Notes:
  * - Used internally by FaasBrowserClient.action method
  * - Provides type-safe action method signature
  * - Return type includes both typed and untyped Response variants
@@ -163,7 +163,7 @@ type FaasBrowserClientAction = <PathOrData extends FaasActionUnionType$1>(action
  * @property {T} [data] - The parsed JSON data to include in the response.
  *   Optional: contains the response payload when JSON data is provided.
  *
- * @remarks
+ * Notes:
  * - All properties are optional
  * - At least one of data or body should be provided for meaningful responses
  * - The Response class automatically defaults status to 200 or 204 based on content
@@ -199,7 +199,7 @@ type ResponseProps<T = any> = {
  * @param {ResponseProps<T>} [props] - Response properties including status, headers, body, and data.
  *   All properties are optional with sensible defaults.
  *
- * @remarks
+ * Notes:
  * - status defaults to 200 if data or body is present, 204 otherwise
  * - body is automatically populated from data if not explicitly provided
  * - headers defaults to an empty object if not provided
@@ -318,7 +318,7 @@ type ResponseErrorProps = {
  * including HTTP status code, response headers, response body, and the original error.
  *
  * @class ResponseError
- * @extends {Error}
+ * @augments Error
  *
  * @property {number} status - The HTTP status code of the failed response. Defaults to 500 if not provided.
  * @property {ResponseHeaders} headers - The response headers from the failed request.
@@ -399,7 +399,7 @@ type ResponseErrorProps = {
  * })
  * ```
  *
- * @remarks
+ * Notes:
  * - ResponseError is automatically thrown by the action method when the server returns an error (status >= 400)
  * - The error message from server responses is extracted from body.error.message if available
  * - When created from an Error object, the original error is preserved in the originalError property
@@ -441,7 +441,7 @@ declare class ResponseError extends Error {
  *   - void: Returns an empty response (204 No Content)
  *   - Error: Throws ResponseError when returning an Error object
  *
- * @remarks
+ * Notes:
  * - Used by setMock() function to mock API calls during tests
  * - Affects all FaasBrowserClient instances when set globally
  * - Can return different responses based on action or params
@@ -568,7 +568,7 @@ declare function setMock(handler: MockHandler | ResponseProps | Response | null)
  * - Streaming support for large responses
  * - Multiple instance support with unique IDs
  *
- * @remarks
+ * Notes:
  * - All requests are POST requests by default
  * - Automatically adds X-FaasJS-Request-Id header for request tracking
  * - baseUrl must end with '/' (will throw Error if not)
@@ -706,7 +706,7 @@ declare class FaasBrowserClient {
    * @throws {ResponseError} When the server returns an error response (status >= 400 or body.error exists)
    * @throws {NetworkError} When network request fails
    *
-   * @remarks
+   * Notes:
    * - All requests are POST requests by default
    * - Action path is automatically converted to lowercase
    * - A unique request ID is generated for each request and sent in X-FaasJS-Request-Id header
@@ -971,7 +971,7 @@ declare class ErrorBoundary extends Component<ErrorBoundaryProps, {
   static displayName: string;
   constructor(props: ErrorBoundaryProps);
   componentDidCatch(error: Error, info: ErrorInfo): void;
-  render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime0.JSX.Element | null;
+  render(): string | number | bigint | boolean | react_jsx_runtime0.JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null;
 }
 //#endregion
 //#region src/equal.d.ts
@@ -1228,13 +1228,13 @@ type FormContextProps<Values extends Record<string, any> = Record<string, any>,
   setErrors: Dispatch<SetStateAction<Record<string, Error>>>;
   valuesRef: RefObject<Values>;
 };
-declare const FormContextProvider: <NewT extends FormContextProps<Record<string, any>, FormElementTypes, FormRules> = FormContextProps<Record<string, any>, FormElementTypes, FormRules>>(props: {
+declare const FormContextProvider: <NewT extends FormContextProps<Record<string, any>, FormElementTypes, FormRules> = FormContextProps<Record<string, any>, FormElementTypes, FormRules>>(this: void, props: {
   value?: Partial<NewT>;
   children: react.ReactNode;
   memo?: true | any[];
   initializeStates?: Partial<NewT>;
 }) => react.ReactNode;
-declare const useFormContext: <NewT extends FormContextProps<Record<string, any>, FormElementTypes, FormRules> = FormContextProps<Record<string, any>, FormElementTypes, FormRules>>() => Readonly<NewT>;
+declare const useFormContext: <NewT extends FormContextProps<Record<string, any>, FormElementTypes, FormRules> = FormContextProps<Record<string, any>, FormElementTypes, FormRules>>(this: void) => Readonly<NewT>;
 //#endregion
 //#region src/OptionalWrapper.d.ts
 type OptionalWrapperProps<TWrapper extends ComponentType<{
@@ -1268,7 +1268,7 @@ declare function OptionalWrapper({
   Wrapper,
   wrapperProps,
   children
-}: OptionalWrapperProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime0.JSX.Element | null | undefined;
+}: OptionalWrapperProps): string | number | bigint | boolean | react_jsx_runtime0.JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
 declare namespace OptionalWrapper {
   var displayName: string;
 }
@@ -1337,7 +1337,7 @@ declare function createSplittingContext<T extends Record<string, any>>(defaultVa
    * }
    * ```
    */
-  Provider<NewT extends T = T>(props: {
+  Provider<NewT extends T = T>(this: void, props: {
     value?: Partial<NewT>;
     children: ReactNode;
     /**
@@ -1378,7 +1378,7 @@ declare function createSplittingContext<T extends Record<string, any>>(defaultVa
    * }
    * ```
    */
-  use: <NewT extends T = T>() => Readonly<NewT>;
+  use: <NewT extends T = T>(this: void) => Readonly<NewT>;
 };
 //#endregion
 //#region src/splittingState.d.ts
@@ -1487,4 +1487,4 @@ declare function usePrevious<T = any>(value: T): T | undefined;
  */
 declare function useStateRef<T = any>(initialValue?: T): [T | null, Dispatch<SetStateAction<T | null>>, RefObject<T | null>];
 //#endregion
-export { BaseUrl, ErrorBoundary, ErrorBoundaryProps, ErrorChildrenProps, type FaasAction, type FaasActionUnionType, FaasBrowserClient, FaasBrowserClientAction, type FaasData, FaasDataInjection, FaasDataWrapper, FaasDataWrapperProps, FaasDataWrapperRef, type FaasParams, FaasReactClient, FaasReactClientInstance, FaasReactClientOptions, FormContainer as Form, type FormButtonElementProps, FormContextProps, FormContextProvider, FormDefaultElements, FormDefaultLang, FormDefaultRules, FormDefaultRulesOptions, FormElementTypes, FormInput, type FormInputElementProps, FormInputProps, FormItem, FormItemName, FormItemProps, type FormLabelElementProps, FormLang, type FormProps, FormRule, FormRules, InferFormInputProps, InferFormRulesOptions, InferRuleOption, MockHandler, OnError, OptionalWrapper, OptionalWrapperProps, Options, Response, ResponseError, ResponseErrorProps, ResponseHeaders, ResponseProps, StateSetters, StatesWithSetters, UseFaasStreamOptions, UseFaasStreamResult, createSplittingContext, equal, faas, generateId, getClient, setMock, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, useFaasOptions, useFaasStream, useFormContext, usePrevious, useSplittingState, useStateRef, validValues, withFaasData };
+export { BaseUrl, ErrorBoundary, ErrorBoundaryProps, ErrorChildrenProps, type FaasAction, type FaasActionUnionType, FaasBrowserClient, FaasBrowserClientAction, type FaasData, FaasDataInjection, FaasDataWrapper, FaasDataWrapperProps, FaasDataWrapperRef, type FaasParams, FaasReactClient, FaasReactClientInstance, FaasReactClientOptions, FormContainer as Form, type FormButtonElementProps, FormContextProps, FormContextProvider, FormDefaultElements, FormDefaultLang, FormDefaultRules, FormDefaultRulesOptions, FormElementTypes, FormInput, type FormInputElementProps, FormInputProps, FormItem, FormItemName, FormItemProps, type FormLabelElementProps, FormLang, FormProps, FormRule, FormRules, InferFormInputProps, InferFormRulesOptions, InferRuleOption, MockHandler, OnError, OptionalWrapper, OptionalWrapperProps, Options, Response, ResponseError, ResponseErrorProps, ResponseHeaders, ResponseProps, StateSetters, StatesWithSetters, UseFaasStreamOptions, UseFaasStreamResult, createSplittingContext, equal, faas, generateId, getClient, setMock, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, useFaasOptions, useFaasStream, useFormContext, usePrevious, useSplittingState, useStateRef, validValues, withFaasData };

package/dist/index.mjs

@@ -1,6 +1,5 @@
 import { Component, cloneElement, createContext, forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-
 //#region src/generateId.ts
 /**
 * Generate random id with prefix
@@ -17,7 +16,6 @@ function generateId(prefix = "", length = 18) {
 	if (length < 8 || length > 18) throw new Error("Length must be 8 ~ 18");
 	return `${prefix}${Date.now().toString(36).padStart(8, "0")}${Math.random().toString(36).substring(2, length - 6).padEnd(length - 8, "0")}`;
 }
-
 //#endregion
 //#region src/browser.ts
 /**
@@ -40,7 +38,7 @@ function generateId(prefix = "", length = 18) {
 * @param {ResponseProps<T>} [props] - Response properties including status, headers, body, and data.
 *   All properties are optional with sensible defaults.
 *
-* @remarks
+* Notes:
 * - status defaults to 200 if data or body is present, 204 otherwise
 * - body is automatically populated from data if not explicitly provided
 * - headers defaults to an empty object if not provided
@@ -158,7 +156,7 @@ var Response = class {
 * including HTTP status code, response headers, response body, and the original error.
 *
 * @class ResponseError
-* @extends {Error}
+* @augments Error
 *
 * @property {number} status - The HTTP status code of the failed response. Defaults to 500 if not provided.
 * @property {ResponseHeaders} headers - The response headers from the failed request.
@@ -239,7 +237,7 @@ var Response = class {
 * })
 * ```
 *
-* @remarks
+* Notes:
 * - ResponseError is automatically thrown by the action method when the server returns an error (status >= 400)
 * - The error message from server responses is extracted from body.error.message if available
 * - When created from an Error object, the original error is preserved in the originalError property
@@ -262,7 +260,7 @@ var ResponseError = class extends Error {
 			message: data,
 			...options
 		};
-		else if (data instanceof Error || data?.constructor?.name?.includes("Error")) props = {
+		else if (data instanceof Error || typeof data === "object" && data !== null && typeof data.constructor?.name === "string" && data.constructor.name.includes("Error")) props = {
 			message: data.message,
 			originalError: data,
 			...options
@@ -345,7 +343,7 @@ function setMock(handler) {
 * - Streaming support for large responses
 * - Multiple instance support with unique IDs
 *
-* @remarks
+* Notes:
 * - All requests are POST requests by default
 * - Automatically adds X-FaasJS-Request-Id header for request tracking
 * - baseUrl must end with '/' (will throw Error if not)
@@ -489,7 +487,7 @@ var FaasBrowserClient = class {
 	* @throws {ResponseError} When the server returns an error response (status >= 400 or body.error exists)
 	* @throws {NetworkError} When network request fails
 	*
-	* @remarks
+	* Notes:
 	* - All requests are POST requests by default
 	* - Action path is automatically converted to lowercase
 	* - A unique request ID is generated for each request and sent in X-FaasJS-Request-Id header
@@ -648,7 +646,7 @@ var FaasBrowserClient = class {
 						headers,
 						body
 					}));
-				} catch (_) {
+				} catch {
 					return Promise.reject(new ResponseError({
 						message: res,
 						status: response.status,
@@ -660,7 +658,6 @@ var FaasBrowserClient = class {
 		});
 	}
 };
-
 //#endregion
 //#region src/faas.ts
 /**
@@ -686,7 +683,6 @@ async function faas(action, params, options) {
 	});
 	return client.browserClient.action(action, params, options);
 }
-
 //#endregion
 //#region src/equal.ts
 const AsyncFunction = (async () => {}).constructor;
@@ -736,13 +732,18 @@ function equal(a, b) {
 * @returns The memoized value.
 */
 function useEqualMemoize(value) {
+	const ref = useRef(value);
+	if (!equal(value, ref.current)) ref.current = value;
+	return ref.current;
+}
+function useEqualSignal(value) {
 	const ref = useRef(value);
 	const signalRef = useRef(0);
 	if (!equal(value, ref.current)) {
 		ref.current = value;
 		signalRef.current += 1;
 	}
-	return useMemo(() => ref.current, [signalRef.current]);
+	return signalRef.current;
 }
 /**
 * Custom hook that works like `useEffect` but uses deep comparison on dependencies.
@@ -752,7 +753,7 @@ function useEqualMemoize(value) {
 * @returns The result of the `useEffect` hook with memoized dependencies.
 */
 function useEqualEffect(callback, dependencies) {
-	return useEffect(callback, useEqualMemoize(dependencies));
+	return useEffect(callback, [useEqualSignal(dependencies)]);
 }
 /**
 * Custom hook that works like `useMemo` but uses deep comparison on dependencies.
@@ -762,7 +763,12 @@ function useEqualEffect(callback, dependencies) {
 * @returns The result of the `useMemo` hook with memoized dependencies.
 */
 function useEqualMemo(callback, dependencies) {
-	return useMemo(callback, useEqualMemoize(dependencies));
+	const signal = useEqualSignal(dependencies);
+	const callbackRef = useRef(callback);
+	callbackRef.current = callback;
+	return useMemo(() => {
+		return callbackRef.current();
+	}, [signal]);
 }
 /**
 * Custom hook that works like `useCallback` but uses deep comparison on dependencies.
@@ -772,13 +778,9 @@ function useEqualMemo(callback, dependencies) {
 * @returns The result of the `useCallback` hook with memoized dependencies.
 */
 function useEqualCallback(callback, dependencies) {
-	return useCallback((...args) => callback(...args), useEqualMemoize(dependencies));
+	return useCallback((...args) => callback(...args), [useEqualSignal(dependencies)]);
 }
-
-//#endregion
-//#region src/FaasDataWrapper.tsx
-const fixedForwardRef = forwardRef;
-const FaasDataWrapper = fixedForwardRef((props, ref) => {
+const FaasDataWrapper = forwardRef((props, ref) => {
 	const requestOptions = {
 		...props.data !== void 0 ? { data: props.data } : {},
 		...props.setData ? { setData: props.setData } : {}
@@ -822,7 +824,6 @@ function withFaasData(Component, faasProps) {
 		children: /* @__PURE__ */ jsx(Component, { ...props })
 	});
 }
-
 //#endregion
 //#region src/useFaas.tsx
 /**
@@ -876,7 +877,8 @@ function useFaas(action, defaultParams, options = {}) {
 				const nextData = r.data;
 				setFails(0);
 				setError(null);
-				options.setData ? options.setData(nextData) : localSetData(nextData);
+				if (options.setData) options.setData(nextData);
+				else localSetData(nextData);
 				setLoading(false);
 				for (const { resolve } of pendingReloadsRef.current.values()) resolve(nextData);
 				pendingReloadsRef.current.clear();
@@ -950,7 +952,6 @@ function useFaas(action, defaultParams, options = {}) {
 		setError
 	};
 }
-
 //#endregion
 //#region src/client.tsx
 const clients = {};
@@ -1011,7 +1012,6 @@ function getClient(host) {
 	}
 	return client;
 }
-
 //#endregion
 //#region src/constant.ts
 /**
@@ -1022,7 +1022,6 @@ function useConstant(fn) {
 	if (!ref.current) ref.current = { v: fn() };
 	return ref.current.v;
 }
-
 //#endregion
 //#region src/ErrorBoundary.tsx
 var ErrorBoundary = class extends Component {
@@ -1057,7 +1056,6 @@ var ErrorBoundary = class extends Component {
 		return this.props.children ?? null;
 	}
 };
-
 //#endregion
 //#region src/useStateRef.ts
 /**
@@ -1094,7 +1092,6 @@ function useStateRef(initialValue) {
 		ref
 	];
 }
-
 //#endregion
 //#region src/splittingState.tsx
 /**
@@ -1123,7 +1120,6 @@ function useSplittingState(initialStates) {
 	}
 	return states;
 }
-
 //#endregion
 //#region src/splittingContext.tsx
 /**
@@ -1206,7 +1202,6 @@ function createSplittingContext(defaultValue) {
 		use
 	};
 }
-
 //#endregion
 //#region src/Form/context.tsx
 const FormContext = createSplittingContext([
@@ -1225,7 +1220,6 @@ const FormContext = createSplittingContext([
 ]);
 const FormContextProvider = FormContext.Provider;
 const useFormContext = FormContext.use;
-
 //#endregion
 //#region src/Form/Input.tsx
 function processValue(input, rules) {
@@ -1258,7 +1252,6 @@ function FormInput({ name, rules, ...rest }) {
 	});
 }
 FormInput.displayName = "FormInput";
-
 //#endregion
 //#region src/Form/Item.tsx
 function FormItem(props) {
@@ -1275,7 +1268,6 @@ function FormItem(props) {
 	});
 }
 FormItem.displayName = "FormItem";
-
 //#endregion
 //#region src/Form/Body.tsx
 function FormBody() {
@@ -1283,7 +1275,6 @@ function FormBody() {
 	return items.map((item) => /* @__PURE__ */ jsx(FormItem, { ...item }, item.name));
 }
 FormBody.displayName = "FormBody";
-
 //#endregion
 //#region src/Form/elements/Button.tsx
 const FormButtonElement = forwardRef(({ children, submit, submitting, ...props }, ref) => /* @__PURE__ */ jsx("button", {
@@ -1295,7 +1286,6 @@ const FormButtonElement = forwardRef(({ children, submit, submitting, ...props }
 	children
 }));
 FormButtonElement.displayName = "FormButtonElement";
-
 //#endregion
 //#region src/Form/elements/Input.tsx
 const FormInputElement = forwardRef(({ onChange, ...props }, ref) => /* @__PURE__ */ jsx("input", {
@@ -1304,7 +1294,6 @@ const FormInputElement = forwardRef(({ onChange, ...props }, ref) => /* @__PURE_
 	ref
 }));
 FormInputElement.displayName = "FormInputElement";
-
 //#endregion
 //#region src/Form/elements/Label.tsx
 const FormLabelElement = ({ name, title, description, error, children }) => {
@@ -1319,7 +1308,6 @@ const FormLabelElement = ({ name, title, description, error, children }) => {
 	] });
 };
 FormLabelElement.displayName = "FormLabelElement";
-
 //#endregion
 //#region src/Form/elements/index.ts
 const FormDefaultElements = {
@@ -1327,7 +1315,6 @@ const FormDefaultElements = {
 	Input: FormInputElement,
 	Button: FormButtonElement
 };
-
 //#endregion
 //#region src/Form/rules.ts
 /**
@@ -1365,42 +1352,36 @@ async function validValues(rules, items, values, lang) {
 	}
 	return errors;
 }
-
 //#endregion
 //#region src/Form/Footer.tsx
 function FormFooter() {
 	const { submitting, setSubmitting, onSubmit, valuesRef, Elements, items, setErrors, lang, rules } = useFormContext();
-	const handleSubmit = useCallback(async () => {
-		setSubmitting(true);
-		setErrors({});
-		const errors = await validValues(rules, items, valuesRef.current, lang);
-		if (Object.keys(errors).length) {
-			setErrors(errors);
-			setSubmitting(false);
-			return;
-		}
-		onSubmit(valuesRef.current).finally(() => setSubmitting(false));
-	}, [
-		setSubmitting,
-		setErrors,
-		rules,
-		items,
-		lang,
-		onSubmit
-	]);
-	return useMemo(() => /* @__PURE__ */ jsx(Elements.Button, {
+	const Button = Elements.Button;
+	return /* @__PURE__ */ jsx(Button, {
 		submitting,
-		submit: handleSubmit,
+		submit: useCallback(async () => {
+			setSubmitting(true);
+			setErrors({});
+			const errors = await validValues(rules, items, valuesRef.current, lang);
+			if (Object.keys(errors).length) {
+				setErrors(errors);
+				setSubmitting(false);
+				return;
+			}
+			onSubmit(valuesRef.current).finally(() => setSubmitting(false));
+		}, [
+			setSubmitting,
+			setErrors,
+			rules,
+			items,
+			valuesRef,
+			lang,
+			onSubmit
+		]),
 		children: lang.submit
-	}), [
-		submitting,
-		handleSubmit,
-		lang.submit,
-		Elements.Button
-	]);
+	});
 }
 FormFooter.displayName = "FormFooter";
-
 //#endregion
 //#region src/Form/lang.ts
 const FormDefaultLang = {
@@ -1409,7 +1390,6 @@ const FormDefaultLang = {
 	string: "This field must be a string",
 	number: "This field must be a number"
 };
-
 //#endregion
 //#region src/Form/Container.tsx
 function mergeValues(items, defaultValues = {}) {
@@ -1469,7 +1449,6 @@ function FormContainer({ defaultValues, Elements, rules, lang, items, ...props }
 	});
 }
 FormContainer.displayName = "FormContainer";
-
 //#endregion
 //#region src/OptionalWrapper.tsx
 /**
@@ -1498,7 +1477,6 @@ function OptionalWrapper({ condition, Wrapper, wrapperProps, children }) {
 	return children;
 }
 OptionalWrapper.displayName = "OptionalWrapper";
-
 //#endregion
 //#region src/useFaasStream.tsx
 /**
@@ -1644,7 +1622,6 @@ function useFaasStream(action, defaultParams, options = {}) {
 		setError
 	};
 }
-
 //#endregion
 //#region src/usePrevious.ts
 /**
@@ -1661,6 +1638,5 @@ function usePrevious(value) {
 	});
 	return ref.current;
 }
-
 //#endregion
-export { ErrorBoundary, FaasBrowserClient, FaasDataWrapper, FaasReactClient, FormContainer as Form, FormContextProvider, FormDefaultElements, FormDefaultLang, FormDefaultRules, FormInput, FormItem, OptionalWrapper, Response, ResponseError, createSplittingContext, equal, faas, generateId, getClient, setMock, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, useFaasStream, useFormContext, usePrevious, useSplittingState, useStateRef, validValues, withFaasData };
+export { ErrorBoundary, FaasBrowserClient, FaasDataWrapper, FaasReactClient, FormContainer as Form, FormContextProvider, FormDefaultElements, FormDefaultLang, FormDefaultRules, FormInput, FormItem, OptionalWrapper, Response, ResponseError, createSplittingContext, equal, faas, generateId, getClient, setMock, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, useFaasStream, useFormContext, usePrevious, useSplittingState, useStateRef, validValues, withFaasData };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/react",
-  "version": "8.0.0-beta.13",
+  "version": "8.0.0-beta.15",
   "homepage": "https://faasjs.com/doc/react/",
   "bugs": {
     "url": "https://github.com/faasjs/faasjs/issues"
@@ -26,16 +26,13 @@
       "require": "./dist/index.cjs"
     }
   },
-  "scripts": {
-    "build": "tsdown src/index.ts --config ../../tsdown.config.ts --external react --dts.eager --no-sourcemap --no-dts.sourcemap"
-  },
   "devDependencies": {
-    "@faasjs/types": ">=8.0.0-beta.13",
+    "@faasjs/types": ">=8.0.0-beta.15",
     "@types/react": "^19.0.0",
     "react": "^19.0.0"
   },
   "peerDependencies": {
-    "@faasjs/types": ">=8.0.0-beta.13"
+    "@faasjs/types": ">=8.0.0-beta.15"
   },
   "engines": {
     "node": ">=24.0.0",