@faasjs/react 1.6.0 → 1.7.0

package/dist/index.d.mts

@@ -40,7 +40,7 @@ type FaasDataInjection<Data = any> = {
   data: Data
   error: any
   promise: Promise<Response<Data>>
-  reload(params?: Record<string, any>): Promise<Response<Data>>
+  reload(params?: Record<string, any>): void
   setData: React.Dispatch<React.SetStateAction<Data>>
   setLoading: React.Dispatch<React.SetStateAction<boolean>>
   setPromise: React.Dispatch<React.SetStateAction<Promise<Response<Data>>>>
@@ -154,6 +154,9 @@ declare function useFaas<PathOrData extends FaasAction$1>(action: string | PathO
  * ```
  */
 declare function FaasDataWrapper<PathOrData extends FaasAction$1>(props: FaasDataWrapperProps<PathOrData>): JSX.Element;
+declare namespace FaasDataWrapper {
+    var whyDidYouRender: boolean;
+}
 
 interface ErrorBoundaryProps {
     children?: ReactNode;
@@ -172,9 +175,10 @@ declare class ErrorBoundary extends Component<ErrorBoundaryProps, {
         componentStack?: string;
     };
 }> {
+    static whyDidYouRender: boolean;
     constructor(props: ErrorBoundaryProps);
     componentDidCatch(error: Error | null, info: any): void;
-    render(): string | number | boolean | react_jsx_runtime.JSX.Element | Iterable<ReactNode>;
+    render(): string | number | boolean | Iterable<ReactNode> | react_jsx_runtime.JSX.Element;
 }
 
 type SignalOptions = {

package/dist/index.d.ts

@@ -40,7 +40,7 @@ type FaasDataInjection<Data = any> = {
   data: Data
   error: any
   promise: Promise<Response<Data>>
-  reload(params?: Record<string, any>): Promise<Response<Data>>
+  reload(params?: Record<string, any>): void
   setData: React.Dispatch<React.SetStateAction<Data>>
   setLoading: React.Dispatch<React.SetStateAction<boolean>>
   setPromise: React.Dispatch<React.SetStateAction<Promise<Response<Data>>>>
@@ -154,6 +154,9 @@ declare function useFaas<PathOrData extends FaasAction$1>(action: string | PathO
  * ```
  */
 declare function FaasDataWrapper<PathOrData extends FaasAction$1>(props: FaasDataWrapperProps<PathOrData>): JSX.Element;
+declare namespace FaasDataWrapper {
+    var whyDidYouRender: boolean;
+}
 
 interface ErrorBoundaryProps {
     children?: ReactNode;
@@ -172,9 +175,10 @@ declare class ErrorBoundary extends Component<ErrorBoundaryProps, {
         componentStack?: string;
     };
 }> {
+    static whyDidYouRender: boolean;
     constructor(props: ErrorBoundaryProps);
     componentDidCatch(error: Error | null, info: any): void;
-    render(): string | number | boolean | react_jsx_runtime.JSX.Element | Iterable<ReactNode>;
+    render(): string | number | boolean | Iterable<ReactNode> | react_jsx_runtime.JSX.Element;
 }
 
 type SignalOptions = {

package/dist/index.js

@@ -103,6 +103,14 @@ function FaasReactClient({
         setLoading(false);
       };
     }, [action, JSON.stringify(options2.params || params), reloadTimes, skip]);
+    const reload = react.useCallback(
+      (params2) => {
+        if (params2)
+          setParams(params2);
+        setReloadTimes((prev) => prev + 1);
+      },
+      [params]
+    );
     return {
       action,
       params,
@@ -111,45 +119,38 @@ function FaasReactClient({
       reloadTimes,
       error,
       promise,
-      async reload(params2) {
-        if (params2)
-          setParams(params2);
-        setReloadTimes(reloadTimes + 1);
-        return promise;
-      },
+      reload,
       setData: (options2 == null ? void 0 : options2.setData) || setData,
       setLoading,
       setPromise,
       setError
     };
   }
-  const reactClient = {
-    id: client.id,
-    faas: faas2,
-    useFaas: useFaas2,
-    FaasDataWrapper({
-      action,
-      params,
-      fallback,
-      render,
-      children,
-      onDataChange,
+  useFaas2.whyDidYouRender = true;
+  function FaasDataWrapper2({
+    action,
+    params,
+    fallback,
+    render,
+    children,
+    onDataChange,
+    data,
+    setData
+  }) {
+    const request = useFaas2(action, params, {
       data,
       setData
-    }) {
-      const request = useFaas2(action, params, {
-        data,
-        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 [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(() => {
       if (loaded) {
         if (children)
           return react.cloneElement(children, request);
@@ -157,7 +158,15 @@ function FaasReactClient({
           return render(request);
       }
       return fallback || null;
-    }
+    }, [loaded, request.action, request.params, request.data, request.error]);
+    return child;
+  }
+  FaasDataWrapper2.whyDidYouRender = true;
+  const reactClient = {
+    id: client.id,
+    faas: faas2,
+    useFaas: useFaas2,
+    FaasDataWrapper: FaasDataWrapper2
   };
   clients[domain] = reactClient;
   return reactClient;
@@ -185,6 +194,7 @@ function FaasDataWrapper(props) {
     return props.fallback || null;
   return /* @__PURE__ */ jsxRuntime.jsx(client.FaasDataWrapper, { ...props });
 }
+FaasDataWrapper.whyDidYouRender = true;
 var ErrorBoundary = class extends react.Component {
   constructor(props) {
     super(props);
@@ -221,6 +231,7 @@ var ErrorBoundary = class extends react.Component {
     return this.props.children;
   }
 };
+ErrorBoundary.whyDidYouRender = true;
 function signal(initialValue, options = {}) {
   const state = signalsReact.signal(initialValue);
   if (options.debugName)

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect, cloneElement, Component } from 'react';
+import { useRef, useState, useEffect, Component, cloneElement, useCallback, useMemo } from 'react';
 import { FaasBrowserClient } from '@faasjs/browser';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { signal as signal$1, effect } from '@preact/signals-react';
@@ -103,6 +103,14 @@ function FaasReactClient({
         setLoading(false);
       };
     }, [action, JSON.stringify(options2.params || params), reloadTimes, skip]);
+    const reload = useCallback(
+      (params2) => {
+        if (params2)
+          setParams(params2);
+        setReloadTimes((prev) => prev + 1);
+      },
+      [params]
+    );
     return {
       action,
       params,
@@ -111,45 +119,38 @@ function FaasReactClient({
       reloadTimes,
       error,
       promise,
-      async reload(params2) {
-        if (params2)
-          setParams(params2);
-        setReloadTimes(reloadTimes + 1);
-        return promise;
-      },
+      reload,
       setData: (options2 == null ? void 0 : options2.setData) || setData,
       setLoading,
       setPromise,
       setError
     };
   }
-  const reactClient = {
-    id: client.id,
-    faas: faas2,
-    useFaas: useFaas2,
-    FaasDataWrapper({
-      action,
-      params,
-      fallback,
-      render,
-      children,
-      onDataChange,
+  useFaas2.whyDidYouRender = true;
+  function FaasDataWrapper2({
+    action,
+    params,
+    fallback,
+    render,
+    children,
+    onDataChange,
+    data,
+    setData
+  }) {
+    const request = useFaas2(action, params, {
       data,
       setData
-    }) {
-      const request = useFaas2(action, params, {
-        data,
-        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 [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(() => {
       if (loaded) {
         if (children)
           return cloneElement(children, request);
@@ -157,7 +158,15 @@ function FaasReactClient({
           return render(request);
       }
       return fallback || null;
-    }
+    }, [loaded, request.action, request.params, request.data, request.error]);
+    return child;
+  }
+  FaasDataWrapper2.whyDidYouRender = true;
+  const reactClient = {
+    id: client.id,
+    faas: faas2,
+    useFaas: useFaas2,
+    FaasDataWrapper: FaasDataWrapper2
   };
   clients[domain] = reactClient;
   return reactClient;
@@ -185,6 +194,7 @@ function FaasDataWrapper(props) {
     return props.fallback || null;
   return /* @__PURE__ */ jsx(client.FaasDataWrapper, { ...props });
 }
+FaasDataWrapper.whyDidYouRender = true;
 var ErrorBoundary = class extends Component {
   constructor(props) {
     super(props);
@@ -221,6 +231,7 @@ var ErrorBoundary = class extends Component {
     return this.props.children;
   }
 };
+ErrorBoundary.whyDidYouRender = true;
 function signal(initialValue, options = {}) {
   const state = signal$1(initialValue);
   if (options.debugName)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/react",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -22,7 +22,7 @@
     "dist"
   ],
   "dependencies": {
-    "@faasjs/browser": "1.6.0"
+    "@faasjs/browser": "1.7.0"
   },
   "peerDependencies": {
     "react": "*",