Cancelling callbacks on useReturn unmount

example/src/App.tsx

@@ -15,28 +15,35 @@ import {
 } from "react-router-dom";
 import ProjectUser from "./ProjectUser";
 import UseReturnExample from './UseReturnExample';
+import UseReturnStressTest from './UseReturnStressTest';
 
-const IntegrationExample = () => (
-  <EasybaseProvider ebconfig={ebconfig} options={{ logging: false }}>
-    <h2>Visual Query</h2>
-    <QueryExample />
-    <hr className="m-4" />
-    <h2>Function</h2>
-    <FunctionExample />
-    <hr className="m-4" />
-    <h2>Db</h2>
-    <DbExample />
-    <hr className="m-4" />
-    <h2>Use Return</h2>
-    <UseReturnExample />
-  </EasybaseProvider>
-)
+const IntegrationExample = () => {
+  React.useEffect(() => console.log("MOUNTING INTEGRATION EXAMPLE"), []);
+  return (
+    <EasybaseProvider ebconfig={ebconfig} options={{ logging: false }}>
+      <h2>Visual Query</h2>
+      <QueryExample />
+      <hr className="m-4" />
+      <h2>Function</h2>
+      <FunctionExample />
+      <hr className="m-4" />
+      <h2>Db</h2>
+      <DbExample />
+      <hr className="m-4" />
+      <h2>Use Return</h2>
+      <UseReturnExample />
+    </EasybaseProvider>
+  )
+}
 
-const ProjectExample = () => (
-  <EasybaseProvider ebconfig={ebconfig2} options={{ logging: true }}>
-    <ProjectUser />
-  </EasybaseProvider>
-)
+const ProjectExample = () => {
+  React.useEffect(() => console.log("MOUNTING PROJECT EXAMPLE"), []);
+  return (
+    <EasybaseProvider ebconfig={ebconfig2} options={{ logging: true }}>
+      <ProjectUser />
+    </EasybaseProvider>
+  )
+}
 
 const App = () => {
   return (
@@ -48,6 +55,9 @@ const App = () => {
         <li>
           <Link to="/project">Project Example</Link>
         </li>
+        <li>
+          <Link to="/usereturnstresstest">useReturn Stress Test</Link>
+        </li>
       </ul>
 
       <Switch>
@@ -57,6 +67,11 @@ const App = () => {
         <Route path="/project" exact >
           <ProjectExample />
         </Route>
+        <Route path="/usereturnstresstest" exact >
+          <EasybaseProvider ebconfig={ebconfig} options={{ logging: true }}>
+            <UseReturnStressTest />
+          </EasybaseProvider>
+        </Route>
       </Switch>
     </HashRouter>
   )

example/src/UseReturnStressTest.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import { useEasybase } from 'easybase-react';
+import CardElement from "./DbCardElement";
+
+const ChildUseReturn = () => {
+    const [ratingState, setRatingState] = useState(50);
+
+    const {
+        db,
+        useReturn,
+        e
+    } = useEasybase();
+
+    const { frame, loading } = useReturn(() => db()
+        .return()
+        .where(e.lt('rating', ratingState))
+        .limit(10),
+        [ratingState]);
+
+    return (
+        <div>
+            <div style={{ display: "flex", alignItems: "center" }}>
+                {loading ? <div className="loader"></div> : frame.map((ele, index) => <CardElement {...ele} index={index} key={index} />)}
+            </div>
+            <div className="button-row">
+                <div className="d-flex align-items-center">
+                    <p className="m-4">Edit Rating filter: </p>
+                    <input type="number" onChange={e => setRatingState(+e.target.value)} value={ratingState} />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+const UseReturnStressTest = () => {
+    const [showChild, setShowChild] = useState(true);
+
+    const {
+        db,
+    } = useEasybase();
+
+    const onAddPage = async () => {
+        await db().insert({ rating: 68, "app name": "Inserted App", _position: 0 }).all();
+    }
+
+    return (
+        <div>
+            <div>
+                <button className="btn green" onClick={onAddPage}><span>Add<br />Card</span></button>
+                <label>
+                    Show Child:
+                    <input type="checkbox" onChange={e => setShowChild(e.target.checked)} checked={showChild} />
+                </label>
+
+                { showChild && <ChildUseReturn /> }
+            </div>
+        </div>
+    )
+}
+
+export default UseReturnStressTest;

src/EasybaseProvider.tsx

@@ -483,7 +483,6 @@ const EasybaseProvider = ({ children, ebconfig, options }: EasybaseProviderProps
         const [frame, setFrame] = useState<Record<string, any>[]>([]);
         const [error, setError] = useState<any>(null);
         const [loading, setLoading] = useState<boolean>(false);
-
         const [dead, setDead] = useState<boolean>(false);
 
         const doFetch = async (): Promise<void> => {
@@ -500,11 +499,15 @@ const EasybaseProvider = ({ children, ebconfig, options }: EasybaseProviderProps
         }
 
         useEffect(() => {
+            let isAlive = true;
             if (!dead) {
                 const _instanceTableName: string = (dbInstance() as any)._tableName;
                 (unsubscribe as any)("true");
 
                 const _listener = dbEventListener((status?: DB_STATUS, queryType?: string, executeCount?: EXECUTE_COUNT, tableName?: string | null, returned?: any) => {
+                    if (!isAlive) {
+                        return;
+                    }
                     log(_instanceTableName, status, queryType, executeCount, tableName)
                     if ((tableName === null && _instanceTableName === "untable") || tableName === _instanceTableName) {
                         if (status === DB_STATUS.SUCCESS && queryType !== "select") {
@@ -524,6 +527,7 @@ const EasybaseProvider = ({ children, ebconfig, options }: EasybaseProviderProps
 
                 doFetch();
             }
+            return () => { isAlive = false; }
         }, deps || []);
 
         return {