@faasjs/react 3.0.0-canary.4 → 3.1.0

package/README.md

@@ -15,6 +15,11 @@ React plugin for FaasJS.
 - Compatible with [why-did-you-render](https://github.com/welldone-software/why-did-you-render).
 - Additional React functions:
   - Utils:
+    - [equal](functions/equal.md): Compare two values for deep equality.
+    - [useEqualMemoize](functions/useEqualMemoize.md): Memoize a value with deep equality.
+    - [useEqualEffect](functions/useEqualEffect.md): Run an effect with deep equality.
+    - [useEqualMemo](functions/useEqualMemo.md): Memoize a value with deep equality.
+    - [useEqualCallback](functions/useEqualCallback.md): Memoize a callback with deep equality.
     - [useConstant](functions/useConstant.md): Create a constant value with hooks.
     - [createSplittingContext](functions/createSplittingContext.md): Create a context for code splitting.
     - [OptionalWrapper](functions/OptionalWrapper.md): Render a component optionally.
@@ -34,12 +39,17 @@ npm install @faasjs/react
 ## Functions
 
 - [createSplittingContext](functions/createSplittingContext.md)
+- [equal](functions/equal.md)
 - [faas](functions/faas.md)
 - [FaasDataWrapper](functions/FaasDataWrapper.md)
 - [FaasReactClient](functions/FaasReactClient.md)
 - [getClient](functions/getClient.md)
 - [OptionalWrapper](functions/OptionalWrapper.md)
 - [useConstant](functions/useConstant.md)
+- [useEqualCallback](functions/useEqualCallback.md)
+- [useEqualEffect](functions/useEqualEffect.md)
+- [useEqualMemo](functions/useEqualMemo.md)
+- [useEqualMemoize](functions/useEqualMemoize.md)
 - [useFaas](functions/useFaas.md)
 - [withFaasData](functions/withFaasData.md)
 

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import { FaasAction, FaasData, FaasParams } from '@faasjs/types';
 export { FaasAction, FaasData, FaasParams } from '@faasjs/types';
-import { Response, ResponseError, BaseUrl, Options, FaasBrowserClient } from '@faasjs/browser';
+import { Response, BaseUrl, ResponseError, Options, FaasBrowserClient } from '@faasjs/browser';
 export { Options, Response, ResponseError, ResponseHeaders } from '@faasjs/browser';
 import * as react from 'react';
 import { ReactNode, ReactElement, Component, ComponentType, ComponentProps } from 'react';
@@ -14,6 +14,50 @@ declare namespace useConstant {
     var whyDidYouRender: boolean;
 }
 
+/**
+ * Compares two values for deep equality.
+ *
+ * This function checks if two values are deeply equal by comparing their types and contents.
+ * It handles various data types including primitives, arrays, dates, regular expressions, functions,
+ * maps, sets, and promises.
+ *
+ * @param a - The first value to compare.
+ * @param b - The second value to compare.
+ * @returns `true` if the values are deeply equal, `false` otherwise.
+ */
+declare function equal(a: any, b: any): boolean;
+/**
+ * Custom hook that memoizes a value using deep equality comparison.
+ *
+ * @param value - The value to be memoized.
+ * @returns The memoized value.
+ */
+declare function useEqualMemoize(value: any): any;
+/**
+ * Custom hook that works like `useEffect` but uses deep comparison on dependencies.
+ *
+ * @param callback - The effect callback function to run.
+ * @param dependencies - The list of dependencies for the effect.
+ * @returns The result of the `useEffect` hook with memoized dependencies.
+ */
+declare function useEqualEffect(callback: React.EffectCallback, dependencies: any[]): void;
+/**
+ * Custom hook that works like `useMemo` but uses deep comparison on dependencies.
+ *
+ * @param callback - The callback function to run.
+ * @param dependencies - The list of dependencies.
+ * @returns The result of the `useMemo` hook with memoized dependencies.
+ */
+declare function useEqualMemo<T>(callback: () => T, dependencies: any[]): T;
+/**
+ * Custom hook that works like `useCallback` but uses deep comparison on dependencies.
+ *
+ * @param callback - The callback function to run.
+ * @param dependencies - The list of dependencies.
+ * @returns The result of the `useCallback` hook with memoized dependencies.
+ */
+declare function useEqualCallback<T extends (...args: any[]) => any>(callback: T, dependencies: any[]): T;
+
 /**
  * Creates a splitting context with the given default value.
  *
@@ -79,6 +123,11 @@ type FaasDataInjection<PathOrData extends FaasAction = any> = {
     data: FaasData<PathOrData>;
     error: any;
     promise: Promise<Response<FaasData<PathOrData>>>;
+    /**
+     * Reloads data with new or existing parameters.
+     *
+     * **Note**: It will sets skip to false before loading data.
+     */
     reload(params?: Record<string, any>): Promise<Response<PathOrData>>;
     setData: React.Dispatch<React.SetStateAction<FaasData<PathOrData>>>;
     setLoading: React.Dispatch<React.SetStateAction<boolean>>;
@@ -96,9 +145,9 @@ type FaasDataWrapperProps<PathOrData extends FaasAction> = {
     data?: FaasData<PathOrData>;
     /** use custom setData, should work with data */
     setData?: React.Dispatch<React.SetStateAction<FaasData<PathOrData>>>;
-    baseUrl?: string;
+    baseUrl?: BaseUrl;
 };
-declare function FaasDataWrapper<PathOrData extends FaasAction>({ action, params, fallback, render, children, onDataChange, data, setData, baseUrl, }: FaasDataWrapperProps<PathOrData>): JSX.Element;
+declare function FaasDataWrapper<PathOrData extends FaasAction>(props: FaasDataWrapperProps<PathOrData>): JSX.Element;
 declare namespace FaasDataWrapper {
     var whyDidYouRender: boolean;
 }
@@ -116,11 +165,15 @@ type useFaasOptions<PathOrData extends FaasAction> = {
     params?: FaasParams<PathOrData>;
     data?: FaasData<PathOrData>;
     setData?: React.Dispatch<React.SetStateAction<FaasData<PathOrData>>>;
-    /** if skip is true, will not send request */
+    /**
+     * If skip is true, the request will not be sent.
+     *
+     * However, you can still use reload to send the request.
+     */
     skip?: boolean | ((params: FaasParams<PathOrData>) => boolean);
-    /** send the last request after milliseconds */
+    /** Send the last request after milliseconds */
     debounce?: number;
-    baseUrl?: string;
+    baseUrl?: BaseUrl;
 };
 /**
  * Request faas server with React hook
@@ -256,4 +309,4 @@ declare const OptionalWrapper: React.FC<OptionalWrapperProps> & {
     whyDidYouRender: boolean;
 };
 
-export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, faas, getClient, useConstant, useFaas, type useFaasOptions, withFaasData };
+export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, withFaasData };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { FaasAction, FaasData, FaasParams } from '@faasjs/types';
 export { FaasAction, FaasData, FaasParams } from '@faasjs/types';
-import { Response, ResponseError, BaseUrl, Options, FaasBrowserClient } from '@faasjs/browser';
+import { Response, BaseUrl, ResponseError, Options, FaasBrowserClient } from '@faasjs/browser';
 export { Options, Response, ResponseError, ResponseHeaders } from '@faasjs/browser';
 import * as react from 'react';
 import { ReactNode, ReactElement, Component, ComponentType, ComponentProps } from 'react';
@@ -14,6 +14,50 @@ declare namespace useConstant {
     var whyDidYouRender: boolean;
 }
 
+/**
+ * Compares two values for deep equality.
+ *
+ * This function checks if two values are deeply equal by comparing their types and contents.
+ * It handles various data types including primitives, arrays, dates, regular expressions, functions,
+ * maps, sets, and promises.
+ *
+ * @param a - The first value to compare.
+ * @param b - The second value to compare.
+ * @returns `true` if the values are deeply equal, `false` otherwise.
+ */
+declare function equal(a: any, b: any): boolean;
+/**
+ * Custom hook that memoizes a value using deep equality comparison.
+ *
+ * @param value - The value to be memoized.
+ * @returns The memoized value.
+ */
+declare function useEqualMemoize(value: any): any;
+/**
+ * Custom hook that works like `useEffect` but uses deep comparison on dependencies.
+ *
+ * @param callback - The effect callback function to run.
+ * @param dependencies - The list of dependencies for the effect.
+ * @returns The result of the `useEffect` hook with memoized dependencies.
+ */
+declare function useEqualEffect(callback: React.EffectCallback, dependencies: any[]): void;
+/**
+ * Custom hook that works like `useMemo` but uses deep comparison on dependencies.
+ *
+ * @param callback - The callback function to run.
+ * @param dependencies - The list of dependencies.
+ * @returns The result of the `useMemo` hook with memoized dependencies.
+ */
+declare function useEqualMemo<T>(callback: () => T, dependencies: any[]): T;
+/**
+ * Custom hook that works like `useCallback` but uses deep comparison on dependencies.
+ *
+ * @param callback - The callback function to run.
+ * @param dependencies - The list of dependencies.
+ * @returns The result of the `useCallback` hook with memoized dependencies.
+ */
+declare function useEqualCallback<T extends (...args: any[]) => any>(callback: T, dependencies: any[]): T;
+
 /**
  * Creates a splitting context with the given default value.
  *
@@ -79,6 +123,11 @@ type FaasDataInjection<PathOrData extends FaasAction = any> = {
     data: FaasData<PathOrData>;
     error: any;
     promise: Promise<Response<FaasData<PathOrData>>>;
+    /**
+     * Reloads data with new or existing parameters.
+     *
+     * **Note**: It will sets skip to false before loading data.
+     */
     reload(params?: Record<string, any>): Promise<Response<PathOrData>>;
     setData: React.Dispatch<React.SetStateAction<FaasData<PathOrData>>>;
     setLoading: React.Dispatch<React.SetStateAction<boolean>>;
@@ -96,9 +145,9 @@ type FaasDataWrapperProps<PathOrData extends FaasAction> = {
     data?: FaasData<PathOrData>;
     /** use custom setData, should work with data */
     setData?: React.Dispatch<React.SetStateAction<FaasData<PathOrData>>>;
-    baseUrl?: string;
+    baseUrl?: BaseUrl;
 };
-declare function FaasDataWrapper<PathOrData extends FaasAction>({ action, params, fallback, render, children, onDataChange, data, setData, baseUrl, }: FaasDataWrapperProps<PathOrData>): JSX.Element;
+declare function FaasDataWrapper<PathOrData extends FaasAction>(props: FaasDataWrapperProps<PathOrData>): JSX.Element;
 declare namespace FaasDataWrapper {
     var whyDidYouRender: boolean;
 }
@@ -116,11 +165,15 @@ type useFaasOptions<PathOrData extends FaasAction> = {
     params?: FaasParams<PathOrData>;
     data?: FaasData<PathOrData>;
     setData?: React.Dispatch<React.SetStateAction<FaasData<PathOrData>>>;
-    /** if skip is true, will not send request */
+    /**
+     * If skip is true, the request will not be sent.
+     *
+     * However, you can still use reload to send the request.
+     */
     skip?: boolean | ((params: FaasParams<PathOrData>) => boolean);
-    /** send the last request after milliseconds */
+    /** Send the last request after milliseconds */
     debounce?: number;
-    baseUrl?: string;
+    baseUrl?: BaseUrl;
 };
 /**
  * Request faas server with React hook
@@ -256,4 +309,4 @@ declare const OptionalWrapper: React.FC<OptionalWrapperProps> & {
     whyDidYouRender: boolean;
 };
 
-export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, faas, getClient, useConstant, useFaas, type useFaasOptions, withFaasData };
+export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, withFaasData };

package/dist/index.js

@@ -13,6 +13,71 @@ function useConstant(fn) {
   return ref.current.v;
 }
 useConstant.whyDidYouRender = true;
+function equal(a, b) {
+  if (a === b) return true;
+  if ((a === null || a === void 0) && (b === null || b === void 0))
+    return true;
+  if (typeof a !== typeof b) return false;
+  const ctor = a.constructor;
+  if (ctor !== b.constructor) return false;
+  switch (ctor) {
+    case String:
+    case Boolean:
+      return a === b;
+    case Number:
+      return Number.isNaN(a) && Number.isNaN(b) || a === b;
+    case Array: {
+      if (a.length !== b.length) return false;
+      for (let i = 0; i < a.length; i++) {
+        if (!equal(a[i], b[i])) return false;
+      }
+      return true;
+    }
+    case Date:
+      return a.getTime() === b.getTime();
+    case RegExp:
+    case Function:
+      return a.toString() === b.toString();
+    case Map:
+    case Set:
+      return equal(Array.from(a), Array.from(b));
+    case Promise:
+      return a === b;
+    case Object: {
+      const keys = Object.keys(a);
+      if (keys.length !== Object.keys(b).length) return false;
+      for (const key of keys) {
+        if (!equal(a[key], b[key])) return false;
+      }
+      return true;
+    }
+    default:
+      throw Error(`Unsupported type: ${ctor}`);
+  }
+}
+function useEqualMemoize(value) {
+  const ref = react.useRef(value);
+  const signalRef = react.useRef(0);
+  console.log(value, ref.current);
+  if (!equal(value, ref.current)) {
+    ref.current = value;
+    signalRef.current += 1;
+    console.log("signalRef.current", signalRef.current);
+  }
+  return react.useMemo(() => ref.current, [signalRef.current]);
+}
+function useEqualEffect(callback, dependencies) {
+  return react.useEffect(callback, useEqualMemoize(dependencies));
+}
+function useEqualMemo(callback, dependencies) {
+  return react.useMemo(callback, useEqualMemoize(dependencies));
+}
+function useEqualCallback(callback, dependencies) {
+  return react.useCallback(
+    (...args) => callback(...args),
+    useEqualMemoize(dependencies)
+  );
+}
 function createSplittingContext(defaultValue) {
   const contexts = {};
   const keys = Object.keys(defaultValue);
@@ -42,34 +107,28 @@ function createSplittingContext(defaultValue) {
     use
   };
 }
-function FaasDataWrapper({
-  action,
-  params,
-  fallback,
-  render,
-  children,
-  onDataChange,
-  data,
-  setData,
-  baseUrl
-}) {
-  const request = getClient(baseUrl).useFaas(action, params, {
-    data,
-    setData
-  });
+function FaasDataWrapper(props) {
+  const request = getClient(props.baseUrl).useFaas(
+    props.action,
+    props.params,
+    {
+      data: props.data,
+      setData: props.setData
+    }
+  );
   const [loaded, setLoaded] = react.useState(false);
   react.useEffect(() => {
     if (!loaded && !request.loading) setLoaded(true);
   }, [request.loading]);
-  react.useEffect(() => {
-    if (onDataChange) onDataChange(request);
-  }, [JSON.stringify(request.data)]);
-  const child = react.useMemo(() => {
+  useEqualEffect(() => {
+    if (props.onDataChange) props.onDataChange(request);
+  }, [request.data]);
+  const child = useEqualMemo(() => {
     if (loaded) {
-      if (children) return react.cloneElement(children, request);
-      if (render) return render(request);
+      if (props.children) return react.cloneElement(props.children, request);
+      if (props.render) return props.render(request);
     }
-    return fallback || null;
+    return props.fallback || null;
   }, [
     loaded,
     request.action,
@@ -84,47 +143,45 @@ FaasDataWrapper.whyDidYouRender = true;
 function withFaasData(Component2, faasProps) {
   return (props) => /* @__PURE__ */ jsxRuntime.jsx(FaasDataWrapper, { ...faasProps, children: /* @__PURE__ */ jsxRuntime.jsx(Component2, { ...props }) });
 }
-function useFaas(action, defaultParams, options) {
-  if (!options) options = {};
+function useFaas(action, defaultParams, options = {}) {
   const [loading, setLoading] = react.useState(true);
   const [data, setData] = react.useState();
   const [error, setError] = react.useState();
-  const [promise, setPromise] = react.useState();
   const [params, setParams] = react.useState(defaultParams);
   const [reloadTimes, setReloadTimes] = react.useState(0);
   const [fails, setFails] = react.useState(0);
   const [skip, setSkip] = react.useState(
     typeof options.skip === "function" ? options.skip(defaultParams) : options.skip
   );
-  const client = getClient(options.baseUrl);
-  react.useEffect(() => {
+  const promiseRef = react.useRef();
+  const controllerRef = react.useRef(null);
+  useEqualEffect(() => {
     setSkip(
       typeof options.skip === "function" ? options.skip(params) : options.skip
     );
-  }, [
-    typeof options.skip === "function" ? JSON.stringify(params) : options.skip
-  ]);
-  react.useEffect(() => {
-    if (JSON.stringify(defaultParams) !== JSON.stringify(params)) {
+  }, [typeof options.skip === "function" ? params : options.skip]);
+  useEqualEffect(() => {
+    if (!equal(defaultParams, params)) {
       setParams(defaultParams);
     }
-  }, [JSON.stringify(defaultParams)]);
-  react.useEffect(() => {
+  }, [defaultParams]);
+  useEqualEffect(() => {
     if (!action || skip) {
       setLoading(false);
       return;
     }
     setLoading(true);
-    const controller = new AbortController();
+    controllerRef.current = new AbortController();
+    const client = getClient(options.baseUrl);
     function send() {
       const request = client.faas(
         action,
         options.params || params,
-        { signal: controller.signal }
+        { signal: controllerRef.current.signal }
       );
-      setPromise(request);
+      promiseRef.current = request;
       request.then((r) => {
-        options?.setData ? options.setData(r.data) : setData(r.data);
+        options.setData ? options.setData(r.data) : setData(r.data);
         setLoading(false);
       }).catch(async (e) => {
         if (typeof e?.message === "string" && e.message.toLowerCase().indexOf("aborted") >= 0)
@@ -145,40 +202,41 @@ function useFaas(action, defaultParams, options) {
         return Promise.reject(e);
       });
     }
-    if (options?.debounce) {
+    if (options.debounce) {
       const timeout = setTimeout(send, options.debounce);
       return () => {
         clearTimeout(timeout);
-        controller.abort();
+        controllerRef.current?.abort();
         setLoading(false);
       };
     }
     send();
     return () => {
-      controller.abort();
+      controllerRef.current?.abort();
       setLoading(false);
     };
-  }, [action, JSON.stringify(options.params || params), reloadTimes, skip]);
-  const reload = react.useCallback(
+  }, [action, options.params || params, reloadTimes, skip]);
+  const reload = useEqualCallback(
     (params2) => {
+      if (skip) setSkip(false);
       if (params2) setParams(params2);
       setReloadTimes((prev) => prev + 1);
-      return promise;
+      return promiseRef.current;
     },
-    [params]
+    [params, skip]
   );
   return {
     action,
     params,
     loading,
-    data: options?.data || data,
+    data: options.data || data,
     reloadTimes,
     error,
-    promise,
+    promise: promiseRef.current,
     reload,
-    setData: options?.setData || setData,
+    setData: options.setData || setData,
     setLoading,
-    setPromise,
+    setPromise: (newPromise) => typeof newPromise === "function" ? newPromise(promiseRef.current) : promiseRef.current = newPromise,
     setError
   };
 }
@@ -265,8 +323,13 @@ exports.FaasDataWrapper = FaasDataWrapper;
 exports.FaasReactClient = FaasReactClient;
 exports.OptionalWrapper = OptionalWrapper;
 exports.createSplittingContext = createSplittingContext;
+exports.equal = equal;
 exports.faas = faas;
 exports.getClient = getClient;
 exports.useConstant = useConstant;
+exports.useEqualCallback = useEqualCallback;
+exports.useEqualEffect = useEqualEffect;
+exports.useEqualMemo = useEqualMemo;
+exports.useEqualMemoize = useEqualMemoize;
 exports.useFaas = useFaas;
 exports.withFaasData = withFaasData;

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { useRef, createContext, useState, useEffect, useMemo, cloneElement, useCallback, Component, useContext } from 'react';
+import { useRef, useMemo, useEffect, useCallback, createContext, useState, cloneElement, Component, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { FaasBrowserClient } from '@faasjs/browser';
 
@@ -11,6 +11,71 @@ function useConstant(fn) {
   return ref.current.v;
 }
 useConstant.whyDidYouRender = true;
+function equal(a, b) {
+  if (a === b) return true;
+  if ((a === null || a === void 0) && (b === null || b === void 0))
+    return true;
+  if (typeof a !== typeof b) return false;
+  const ctor = a.constructor;
+  if (ctor !== b.constructor) return false;
+  switch (ctor) {
+    case String:
+    case Boolean:
+      return a === b;
+    case Number:
+      return Number.isNaN(a) && Number.isNaN(b) || a === b;
+    case Array: {
+      if (a.length !== b.length) return false;
+      for (let i = 0; i < a.length; i++) {
+        if (!equal(a[i], b[i])) return false;
+      }
+      return true;
+    }
+    case Date:
+      return a.getTime() === b.getTime();
+    case RegExp:
+    case Function:
+      return a.toString() === b.toString();
+    case Map:
+    case Set:
+      return equal(Array.from(a), Array.from(b));
+    case Promise:
+      return a === b;
+    case Object: {
+      const keys = Object.keys(a);
+      if (keys.length !== Object.keys(b).length) return false;
+      for (const key of keys) {
+        if (!equal(a[key], b[key])) return false;
+      }
+      return true;
+    }
+    default:
+      throw Error(`Unsupported type: ${ctor}`);
+  }
+}
+function useEqualMemoize(value) {
+  const ref = useRef(value);
+  const signalRef = useRef(0);
+  console.log(value, ref.current);
+  if (!equal(value, ref.current)) {
+    ref.current = value;
+    signalRef.current += 1;
+    console.log("signalRef.current", signalRef.current);
+  }
+  return useMemo(() => ref.current, [signalRef.current]);
+}
+function useEqualEffect(callback, dependencies) {
+  return useEffect(callback, useEqualMemoize(dependencies));
+}
+function useEqualMemo(callback, dependencies) {
+  return useMemo(callback, useEqualMemoize(dependencies));
+}
+function useEqualCallback(callback, dependencies) {
+  return useCallback(
+    (...args) => callback(...args),
+    useEqualMemoize(dependencies)
+  );
+}
 function createSplittingContext(defaultValue) {
   const contexts = {};
   const keys = Object.keys(defaultValue);
@@ -40,34 +105,28 @@ function createSplittingContext(defaultValue) {
     use
   };
 }
-function FaasDataWrapper({
-  action,
-  params,
-  fallback,
-  render,
-  children,
-  onDataChange,
-  data,
-  setData,
-  baseUrl
-}) {
-  const request = getClient(baseUrl).useFaas(action, params, {
-    data,
-    setData
-  });
+function FaasDataWrapper(props) {
+  const request = getClient(props.baseUrl).useFaas(
+    props.action,
+    props.params,
+    {
+      data: props.data,
+      setData: props.setData
+    }
+  );
   const [loaded, setLoaded] = useState(false);
   useEffect(() => {
     if (!loaded && !request.loading) setLoaded(true);
   }, [request.loading]);
-  useEffect(() => {
-    if (onDataChange) onDataChange(request);
-  }, [JSON.stringify(request.data)]);
-  const child = useMemo(() => {
+  useEqualEffect(() => {
+    if (props.onDataChange) props.onDataChange(request);
+  }, [request.data]);
+  const child = useEqualMemo(() => {
     if (loaded) {
-      if (children) return cloneElement(children, request);
-      if (render) return render(request);
+      if (props.children) return cloneElement(props.children, request);
+      if (props.render) return props.render(request);
     }
-    return fallback || null;
+    return props.fallback || null;
   }, [
     loaded,
     request.action,
@@ -82,47 +141,45 @@ FaasDataWrapper.whyDidYouRender = true;
 function withFaasData(Component2, faasProps) {
   return (props) => /* @__PURE__ */ jsx(FaasDataWrapper, { ...faasProps, children: /* @__PURE__ */ jsx(Component2, { ...props }) });
 }
-function useFaas(action, defaultParams, options) {
-  if (!options) options = {};
+function useFaas(action, defaultParams, options = {}) {
   const [loading, setLoading] = useState(true);
   const [data, setData] = useState();
   const [error, setError] = useState();
-  const [promise, setPromise] = useState();
   const [params, setParams] = useState(defaultParams);
   const [reloadTimes, setReloadTimes] = useState(0);
   const [fails, setFails] = useState(0);
   const [skip, setSkip] = useState(
     typeof options.skip === "function" ? options.skip(defaultParams) : options.skip
   );
-  const client = getClient(options.baseUrl);
-  useEffect(() => {
+  const promiseRef = useRef();
+  const controllerRef = useRef(null);
+  useEqualEffect(() => {
     setSkip(
       typeof options.skip === "function" ? options.skip(params) : options.skip
     );
-  }, [
-    typeof options.skip === "function" ? JSON.stringify(params) : options.skip
-  ]);
-  useEffect(() => {
-    if (JSON.stringify(defaultParams) !== JSON.stringify(params)) {
+  }, [typeof options.skip === "function" ? params : options.skip]);
+  useEqualEffect(() => {
+    if (!equal(defaultParams, params)) {
       setParams(defaultParams);
     }
-  }, [JSON.stringify(defaultParams)]);
-  useEffect(() => {
+  }, [defaultParams]);
+  useEqualEffect(() => {
     if (!action || skip) {
       setLoading(false);
       return;
     }
     setLoading(true);
-    const controller = new AbortController();
+    controllerRef.current = new AbortController();
+    const client = getClient(options.baseUrl);
     function send() {
       const request = client.faas(
         action,
         options.params || params,
-        { signal: controller.signal }
+        { signal: controllerRef.current.signal }
       );
-      setPromise(request);
+      promiseRef.current = request;
       request.then((r) => {
-        options?.setData ? options.setData(r.data) : setData(r.data);
+        options.setData ? options.setData(r.data) : setData(r.data);
         setLoading(false);
       }).catch(async (e) => {
         if (typeof e?.message === "string" && e.message.toLowerCase().indexOf("aborted") >= 0)
@@ -143,40 +200,41 @@ function useFaas(action, defaultParams, options) {
         return Promise.reject(e);
       });
     }
-    if (options?.debounce) {
+    if (options.debounce) {
       const timeout = setTimeout(send, options.debounce);
       return () => {
         clearTimeout(timeout);
-        controller.abort();
+        controllerRef.current?.abort();
         setLoading(false);
       };
     }
     send();
     return () => {
-      controller.abort();
+      controllerRef.current?.abort();
       setLoading(false);
     };
-  }, [action, JSON.stringify(options.params || params), reloadTimes, skip]);
-  const reload = useCallback(
+  }, [action, options.params || params, reloadTimes, skip]);
+  const reload = useEqualCallback(
     (params2) => {
+      if (skip) setSkip(false);
       if (params2) setParams(params2);
       setReloadTimes((prev) => prev + 1);
-      return promise;
+      return promiseRef.current;
     },
-    [params]
+    [params, skip]
   );
   return {
     action,
     params,
     loading,
-    data: options?.data || data,
+    data: options.data || data,
     reloadTimes,
     error,
-    promise,
+    promise: promiseRef.current,
     reload,
-    setData: options?.setData || setData,
+    setData: options.setData || setData,
     setLoading,
-    setPromise,
+    setPromise: (newPromise) => typeof newPromise === "function" ? newPromise(promiseRef.current) : promiseRef.current = newPromise,
     setError
   };
 }
@@ -258,4 +316,4 @@ var OptionalWrapper = ({ condition, Wrapper, wrapperProps, children }) => {
 };
 OptionalWrapper.whyDidYouRender = true;
 
-export { ErrorBoundary, FaasDataWrapper, FaasReactClient, OptionalWrapper, createSplittingContext, faas, getClient, useConstant, useFaas, withFaasData };
+export { ErrorBoundary, FaasDataWrapper, FaasReactClient, OptionalWrapper, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, withFaasData };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/react",
-  "version": "3.0.0-canary.4",
+  "version": "3.1.0",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -34,7 +34,7 @@
     "dist"
   ],
   "dependencies": {
-    "@faasjs/browser": "3.0.0-canary.4"
+    "@faasjs/browser": "3.1.0"
   },
   "peerDependencies": {
     "react": "*"