@docstack/react 0.0.9 → 0.1.1

package/lib/hooks/index.js

@@ -8,81 +8,99 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 // src/hooks/useFind.js
-import { useContext, useEffect, useRef, useState } from 'react';
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { DocStackContext } from '../components/StackProvider/index.js';
-/**
- * Hook to execute a SQL query against a specific stack.
- *
- * @param stack - The name of the stack to query.
- * @param sql - The SQL query string.
- * @param params - Optional parameters for the SQL query.
- * @returns Object containing the query result (rows and AST), loading state, and error.
- *
- * @example
- * ```tsx
- * const UserList = () => {
- *     const { result, loading } = useQuerySQL('my-stack', 'SELECT * FROM User WHERE age > ?', 18);
- *
- *     if (loading) return <div>Loading...</div>;
- *
- *     return (
- *         <ul>
- *             {result.rows.map(user => <li key={user._id}>{user.name}</li>)}
- *         </ul>
- *     );
- * };
- * ```
- */
-export const useQuerySQL = (stack, sql, ...params) => {
+import { collectQueryClasses } from '@docstack/client';
+export const useQuerySQL = (stack, sql, params = [], options = {}) => {
+    const { live = true, coalesceMs = 150 } = options;
     const docStack = useContext(DocStackContext);
     const [result, setResult] = useState({ rows: [], ast: [] });
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
-    // [TODO] Solve bounce of component because of StrictMode or other reasons
-    const queryRef = useRef(false);
-    useEffect(() => {
-        if (!docStack) {
-            // Handle the case where the provider is not yet initialized or missing
-            // You could throw an error or return an empty state.
-            console.error('useClassList must be used within a DocStackProvider.');
-            setLoading(false);
+    // Which classes to watch. Held in state because it falls out of the first result and
+    // drives the subscription effect below.
+    const [watched, setWatched] = useState(undefined);
+    // Stable identities, so the effects key on the query rather than on the render count.
+    // The old `queryRef` latch was standing in for this: `params` arrived as a rest
+    // parameter, a fresh array every render, so the effect re-ran every render and the
+    // latch was the only thing preventing a query storm - at the cost of never re-running
+    // at all, including when `sql` changed. See ADR-0025.
+    const paramsKey = JSON.stringify(params);
+    const paramsRef = useRef(params);
+    paramsRef.current = params;
+    // Guards against a slow earlier run overwriting a fast later one.
+    const runId = useRef(0);
+    const runQuery = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        const stackInstance = docStack === null || docStack === void 0 ? void 0 : docStack.getStack(stack);
+        if (!stackInstance)
             return;
+        const id = ++runId.current;
+        try {
+            const queryResult = yield stackInstance.query(sql, ...paramsRef.current);
+            if (id !== runId.current)
+                return;
+            setResult(queryResult);
+            setWatched(collectQueryClasses(queryResult.ast));
+            setError(null);
         }
-        const runQuery = () => __awaiter(void 0, void 0, void 0, function* () {
-            try {
-                const stackInstance = docStack.getStack(stack);
-                if (stackInstance) {
-                    // Run the initial query
-                    console.log("Preparing to run query", { sql, params });
-                    // debugger
-                    const queryResult = yield stackInstance.query(sql, ...params);
-                    setResult(queryResult);
-                }
-                else {
-                    console.log("Could not find corresponding stack", { stack });
-                }
-            }
-            catch (err) {
-                console.log("Got error while running query", { error: err });
+        catch (err) {
+            if (id === runId.current)
                 setError(err);
-            }
-            finally {
+        }
+        finally {
+            if (id === runId.current)
                 setLoading(false);
-            }
-        });
-        if (!queryRef.current) {
-            queryRef.current = true;
-            setLoading(true);
-            runQuery();
         }
-        else {
-            console.log("Already performing query");
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }), [docStack, stack, sql, paramsKey]);
+    useEffect(() => {
+        if (!docStack) {
+            // Null until the provider's `ready` event: startup, not a missing provider.
+            // See ADR-0022.
+            setLoading(true);
+            return;
         }
+        setLoading(true);
+        runQuery();
+    }, [docStack, runQuery]);
+    const watchedKey = JSON.stringify(watched !== null && watched !== void 0 ? watched : null);
+    useEffect(() => {
+        const stackInstance = docStack === null || docStack === void 0 ? void 0 : docStack.getStack(stack);
+        // `undefined` is "no result yet"; `null` is "the AST could not be accounted for".
+        if (!live || !stackInstance || watched === undefined)
+            return;
+        let cancelled = false;
+        let timer;
+        let subscriptions = [];
+        const target = new EventTarget();
+        const onDoc = () => {
+            clearTimeout(timer);
+            timer = setTimeout(runQuery, coalesceMs);
+        };
+        target.addEventListener("doc", onDoc);
+        // Fail open. Watching every class is wasteful; watching none is silently wrong,
+        // and silence is the failure this hook exists to end. Subscriptions share one
+        // database listener, so the wasteful branch costs little. See ADR-0025.
+        const resolveClasses = () => __awaiter(void 0, void 0, void 0, function* () {
+            if (watched === null)
+                return stackInstance.getClassNames();
+            return watched;
+        });
+        void resolveClasses().then(classes => {
+            if (cancelled)
+                return;
+            subscriptions = classes.map(name => stackInstance.subscribeClassDocs(name, target));
+        });
         return () => {
-            //
+            cancelled = true;
+            clearTimeout(timer);
+            target.removeEventListener("doc", onDoc);
+            for (const subscription of subscriptions)
+                stackInstance.releaseListener(subscription);
         };
-    }, [docStack, stack, params]);
-    return { loading, result, error };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [docStack, stack, live, coalesceMs, watchedKey, runQuery]);
+    return { loading, result, error, refetch: runQuery };
 };
 /**
  * Hook to find documents in a stack using a Mango selector.
@@ -119,52 +137,77 @@ export const useFind = (stack, query, sort, limit = 50) => {
     const [docs, setDocs] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
+    // Guards against a slow earlier run overwriting a fast later one - the same
+    // discipline as useQuerySQL's runId above.
+    const runId = useRef(0);
     useEffect(() => {
+        var _a;
         // Check if the docStack instance is available
         if (!docStack) {
             // Handle the case where the provider is not yet initialized or missing
             // You could throw an error or return an empty state.
-            console.error('useFind must be used within a DocStackProvider.');
-            setLoading(false);
+            // The provider publishes `null` into the context until its `ready`
+            // event fires, so this is the normal startup window, not a missing
+            // provider. Reporting it as one sends the reader hunting for a bug
+            // that is not there - and `setLoading(false)` was worse than the
+            // message: it tells a consumer "loaded, and empty" during startup,
+            // which is indistinguishable from a genuinely empty result. See
+            // ADR-0022.
+            setLoading(true);
             return;
         }
         setLoading(true);
         const runQuery = () => __awaiter(void 0, void 0, void 0, function* () {
+            const id = ++runId.current;
             try {
                 const stackInstance = docStack.getStack(stack);
                 if (stackInstance) {
-                    // Run the initial query
-                    const initialDocs = yield stackInstance.findDocuments(query.selector, query.fields);
-                    if (initialDocs.docs.length) {
-                        let docs = initialDocs.docs; // [TODO] Check types
-                        setDocs(docs);
-                    }
+                    const found = yield stackInstance.findDocuments(query.selector, query.fields);
+                    // An empty result is a result. This setter used to be guarded on
+                    // `.docs.length`, so a live list could gain rows but never lose its
+                    // last one - a deleted document stayed on screen until a remount.
+                    // The hazard that guard was standing in for is *staleness*, and the
+                    // counter above owns that. See ADR-0035.
+                    if (id === runId.current)
+                        setDocs(found.docs);
                 }
             }
             catch (err) {
-                setError(err);
+                if (id === runId.current)
+                    setError(err);
             }
             finally {
-                setLoading(false);
+                if (id === runId.current)
+                    setLoading(false);
             }
         });
         runQuery();
-        // Set up the listener for changes
-        const changeListener = (change) => {
-            // Logic to handle the change and update the docs state
-            // This part is crucial for real-time updates.
-            // You'll need to re-run the query or intelligently update the docs array
-            // based on the change object (add, update, delete).
-            // A simple way is to re-run the query.
-            // runQuery();
+        // A selector names its class directly, so there is no AST to consult - but it has
+        // to be subscribed the same way. This used to listen for `docStack`'s `change`,
+        // which is dispatched from the replication path and carries a `direction`: a
+        // document written locally never produces one, so an implementation built on it
+        // would appear to work while syncing and do nothing on the machine where the user
+        // is typing. See ADR-0025.
+        const className = (_a = query.selector) === null || _a === void 0 ? void 0 : _a["~class"];
+        const stackInstance = docStack.getStack(stack);
+        let timer;
+        let subscription;
+        const target = new EventTarget();
+        const onDoc = () => {
+            clearTimeout(timer);
+            timer = setTimeout(runQuery, 150);
         };
-        // [TODO] Implement events
-        docStack.addEventListener('change', changeListener);
-        // Cleanup function: remove the listener when the component unmounts
+        if (stackInstance && typeof className === "string" && className) {
+            target.addEventListener("doc", onDoc);
+            subscription = stackInstance.subscribeClassDocs(className, target);
+        }
         return () => {
-            docStack.removeEventListener('change', changeListener);
+            clearTimeout(timer);
+            target.removeEventListener("doc", onDoc);
+            if (stackInstance && subscription)
+                stackInstance.releaseListener(subscription);
         };
-    }, [docStack, JSON.stringify(query)]); // Re-run if docStack or query changes
+    }, [docStack, stack, JSON.stringify(query)]); // Re-run if docStack or query changes
     return { docs, loading, error };
 };
 export const useClassCreate = () => {

package/lib/hooks/sync.d.ts

@@ -0,0 +1,27 @@
+import type { SyncStatus } from '@docstack/client';
+/**
+ * Subscribes to replication state for one stack, or for all of them.
+ *
+ * Reads the state DocStack's sync layer keeps rather than tracking replication in the
+ * component: `lastConvergedAt` is the honest "last synced" value - the moment a cycle
+ * finished with nothing left to send - while `lastActiveAt` only says documents moved.
+ *
+ * The subscription is on the stacks, not on the replication handles, so it survives a
+ * {@link StackSyncHandle.restart} (a refreshed credential, say) and works whether it
+ * mounts before or after `sync()` was called.
+ *
+ * @param stackName - Narrow to a single stack. Omit for every open stack.
+ * @returns A map of stack name to {@link SyncStatus}; empty for stacks that have never
+ * synced.
+ *
+ * @example
+ * ```tsx
+ * const SyncBadge = ({ stack }: { stack: string }) => {
+ *     const status = useSyncStatus(stack)[stack];
+ *     if (!status) return <span>Not syncing</span>;
+ *     if (status.state === 'error') return <span>Offline - retrying</span>;
+ *     return <span>Synced {status.lastConvergedAt ? timeAgo(status.lastConvergedAt) : 'never'}</span>;
+ * };
+ * ```
+ */
+export declare const useSyncStatus: (stackName?: string) => Record<string, SyncStatus>;

package/lib/hooks/sync.js

@@ -0,0 +1,76 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useDocStack } from '../components/StackProvider/index.js';
+/**
+ * Subscribes to replication state for one stack, or for all of them.
+ *
+ * Reads the state DocStack's sync layer keeps rather than tracking replication in the
+ * component: `lastConvergedAt` is the honest "last synced" value - the moment a cycle
+ * finished with nothing left to send - while `lastActiveAt` only says documents moved.
+ *
+ * The subscription is on the stacks, not on the replication handles, so it survives a
+ * {@link StackSyncHandle.restart} (a refreshed credential, say) and works whether it
+ * mounts before or after `sync()` was called.
+ *
+ * @param stackName - Narrow to a single stack. Omit for every open stack.
+ * @returns A map of stack name to {@link SyncStatus}; empty for stacks that have never
+ * synced.
+ *
+ * @example
+ * ```tsx
+ * const SyncBadge = ({ stack }: { stack: string }) => {
+ *     const status = useSyncStatus(stack)[stack];
+ *     if (!status) return <span>Not syncing</span>;
+ *     if (status.state === 'error') return <span>Offline - retrying</span>;
+ *     return <span>Synced {status.lastConvergedAt ? timeAgo(status.lastConvergedAt) : 'never'}</span>;
+ * };
+ * ```
+ */
+export const useSyncStatus = (stackName) => {
+    const docStack = useDocStack();
+    const [statuses, setStatuses] = useState({});
+    const collect = useCallback(() => {
+        if (!docStack)
+            return {};
+        const stacks = stackName
+            ? [docStack.getStack(stackName)].filter(Boolean)
+            : docStack.getStacks();
+        const next = {};
+        for (const stack of stacks) {
+            const status = stack.getSyncStatus();
+            if (status)
+                next[stack.name] = status;
+        }
+        return next;
+    }, [docStack, stackName]);
+    useEffect(() => {
+        if (!docStack)
+            return;
+        let subscribed = [];
+        const onStatus = () => setStatuses(collect());
+        const subscribe = () => {
+            for (const { target } of subscribed) {
+                target.removeEventListener('sync-status', onStatus);
+            }
+            const stacks = stackName
+                ? [docStack.getStack(stackName)].filter(Boolean)
+                : docStack.getStacks();
+            subscribed = stacks.map(stack => ({ target: stack }));
+            for (const { target } of subscribed) {
+                target.addEventListener('sync-status', onStatus);
+            }
+            onStatus();
+        };
+        // The set of stacks is not fixed: one joined at runtime has to be picked up.
+        docStack.addEventListener('stack-added', subscribe);
+        docStack.addEventListener('stack-removed', subscribe);
+        subscribe();
+        return () => {
+            docStack.removeEventListener('stack-added', subscribe);
+            docStack.removeEventListener('stack-removed', subscribe);
+            for (const { target } of subscribed) {
+                target.removeEventListener('sync-status', onStatus);
+            }
+        };
+    }, [docStack, stackName, collect]);
+    return statuses;
+};

package/lib/index.d.ts

@@ -2,7 +2,17 @@ import StackProvider, { DocStackContext, useDocStack } from "./components/StackP
 import { useFind, useQuerySQL } from "./hooks/index.js";
 import { useClass, useClassList, useClassDocs, useClassCreate } from "./hooks/class.js";
 import { useDomainList, useDomain, useDomainRelations, useDomainCreate } from "./hooks/domain.js";
+import { useSyncStatus } from "./hooks/sync.js";
 export { StackProvider, DocStackContext, useDocStack };
-export { useFind, useQuerySQL };
+export { useFind, useQuerySQL, useSyncStatus };
 export { useClassList, useClass, useClassDocs, useClassCreate };
 export { useDomainList, useDomain, useDomainRelations, useDomainCreate };
+/**
+ * Document-modelling types, re-exported from `@docstack/client`.
+ *
+ * Sourced from the client rather than `@docstack/shared` on purpose: the two packages
+ * would otherwise resolve their own copies of `@docstack/shared`, and a consumer using
+ * both could end up holding two structurally-identical-but-distinct `Patch` types.
+ * One source means one copy.
+ */
+export type { AttributeType, AttributeTypeConfig, AttributeModel, ClassModel, DomainModel, TriggerModel, Document, RelationDocument, Patch, SelectAST, UnionAST, ClientCredentials, DocstackReady, StackConfig, StackOptions, SyncDirection, SyncState, SyncStatus, StackSyncOptions, DocStackSyncOptions, RemoteResolver, InternalDocFilterOptions, } from "@docstack/client";

package/lib/index.js

@@ -2,7 +2,8 @@ import StackProvider, { DocStackContext, useDocStack } from "./components/StackP
 import { useFind, useQuerySQL } from "./hooks/index.js";
 import { useClass, useClassList, useClassDocs, useClassCreate } from "./hooks/class.js";
 import { useDomainList, useDomain, useDomainRelations, useDomainCreate } from "./hooks/domain.js";
+import { useSyncStatus } from "./hooks/sync.js";
 export { StackProvider, DocStackContext, useDocStack };
-export { useFind, useQuerySQL };
+export { useFind, useQuerySQL, useSyncStatus };
 export { useClassList, useClass, useClassDocs, useClassCreate };
 export { useDomainList, useDomain, useDomainRelations, useDomainCreate };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docstack/react",
-  "version": "0.0.9",
+  "version": "0.1.1",
   "description": "One does not simply stack documents.",
   "main": "lib/index.js",
   "module": "lib/index.js",
@@ -38,8 +38,7 @@
     "react-dom": "^19.2.3"
   },
   "dependencies": {
-    "@docstack/client": "^0.1.4",
-    "@docstack/shared": "^0.0.5",
+    "@docstack/client": "^0.1.5",
     "react": "^19.2.3",
     "react-dom": "^19.2.3"
   },

package/src/components/StackProvider/index.tsx

@@ -1,6 +1,6 @@
-import { ReactNode, createContext, useContext, useRef, useCallback, useEffect, useState } from 'react';
+import { ReactNode, createContext, useContext, useRef, useCallback, useEffect, useMemo, useReducer, useState } from 'react';
 import {DocStack} from '@docstack/client'; // Import your DocStack class
-import { ClientCredentials, StackConfig } from '@docstack/shared';
+import { ClientCredentials, StackConfig } from '@docstack/client';
 
 // You can give it a default value, e.g., null, which can be checked later.
 /**
@@ -11,16 +11,16 @@ export const DocStackContext = createContext<DocStack | null>(null);
 
 /**
  * Hook to access the DocStack instance.
- * 
+ *
  * @returns The current {@link DocStack} instance or null if not yet initialized.
- * 
+ *
  * @example
  * ```tsx
  * const MyComponent = () => {
  *     const docStack = useDocStack();
- *     
+ *
  *     if (!docStack) return <div>Loading...</div>;
- *     
+ *
  *     return <div>Connected to {docStack.getStacks().length} stacks</div>;
  * };
  * ```
@@ -29,9 +29,41 @@ export const useDocStack = () => {
     return useContext(DocStackContext);
 };
 
+/**
+ * The name a configuration entry will end up carrying as a stack.
+ *
+ * Mirrors `DocStack.resolveStackConfig`: a string configuration *is* the name, an
+ * object's `name` wins, and a connection-only entry is identified by its connection.
+ *
+ * @param config - One stack configuration.
+ * @returns The identifier to reconcile on.
+ */
+const stackKey = (config: StackConfig): string => {
+    if (typeof config === 'string') return config;
+    return config.name || (config as { connection?: string }).connection || '';
+};
+
+/**
+ * Merges the `credentials` prop into the configurations it applies to.
+ *
+ * @param config - The configurations as given.
+ * @param credentials - One credential for every stack, or one per configuration entry.
+ * @returns Configurations with credentials folded in.
+ */
+const mergeCredentials = (
+    config: StackConfig[],
+    credentials?: ClientCredentials | ClientCredentials[]
+): StackConfig[] => config.map((cfg, idx) => {
+    const cred = Array.isArray(credentials) ? credentials[idx] : credentials;
+    if (typeof cfg === 'string') {
+        return cred ? { connection: `db-${cfg}`, name: cfg, credentials: cred } : cfg;
+    }
+    return cred ? { ...cfg, credentials: cred } : cfg;
+}) as StackConfig[];
+
 /**
  * Props for the {@link StackProvider} component.
- * 
+ *
  * @example
  * ```ts
  * const props: DocStackProviderProps = {
@@ -45,6 +77,11 @@ export interface DocStackProviderProps {
     config: StackConfig[];
     /** Credentials for the stack(s). Can be a single object or an array matching the config. */
     credentials?: ClientCredentials | ClientCredentials[];
+    /**
+     * Delete the underlying database when a stack drops out of `config`. Defaults to
+     * `false`: a workspace that disappears from the configuration is closed, not erased.
+     */
+    destroyRemovedStacks?: boolean;
     /** Child components. */
     children?: ReactNode;
 }
@@ -52,52 +89,99 @@ export interface DocStackProviderProps {
 /**
  * A provider component that initializes the DocStack client and makes it available
  * to child components via the {@link useDocStack} hook.
- * It handles the asynchronous initialization of the stack(s).
- * 
+ *
+ * The `config` prop is reconciled rather than read once: a stack that appears in it is
+ * opened, a stack that disappears is closed, and the stacks either side of the change
+ * are left running. An application whose set of databases grows at runtime - one per
+ * workspace, say - therefore does not have to reload to pick up a new one, which
+ * matters once each stack also carries a live replication that a reload would drop.
+ *
  * @example
  * ```tsx
  * import { StackProvider } from '@docstack/react';
- * 
- * const App = () => (
- *     <StackProvider config={[{ name: 'my-db' }]}>
- *         <MyApp />
- *     </StackProvider>
- * );
+ *
+ * const App = () => {
+ *     const workspaces = useWorkspaces();
+ *     const config = useMemo(
+ *         () => [{ name: 'app' }, ...workspaces.map(w => ({ name: `ws-${w.slug}` }))],
+ *         [workspaces]
+ *     );
+ *     return (
+ *         <StackProvider config={config}>
+ *             <MyApp />
+ *         </StackProvider>
+ *     );
+ * };
  * ```
  */
 const StackProvider = (props: DocStackProviderProps) => {
-    const { config, children, credentials } = props;
+    const { config, children, credentials, destroyRemovedStacks } = props;
     // Use a ref to store the DocStack instance
     const docStackRef = useRef<DocStack | null>(null);
     const [docStack, setDocStack] = useState<DocStack | null>(null);
+    // The DocStack instance is stable across reconciliations, so adding or removing a
+    // stack changes nothing React can see by itself.
+    const [, signalStacksChanged] = useReducer((count: number) => count + 1, 0);
+    // Reconciliations are serialized: opening a database is asynchronous and two
+    // overlapping passes would race to add the same stack twice.
+    const reconciling = useRef<Promise<unknown>>(Promise.resolve());
+
+    const mergedConfig = useMemo(
+        () => mergeCredentials(config, credentials),
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [JSON.stringify(config), JSON.stringify(credentials)]
+    );
 
     const setsDocStackWhenReady = useCallback(() => {
         setDocStack(docStackRef.current)
     },[]);
 
     useEffect(() => {
-        if (docStackRef.current === null && config.length) {
-            console.log("DocStack provider - init instance", {config});
-            const mergedConfig = config.map((cfg, idx) => {
-                const cred = Array.isArray(credentials) ? credentials[idx] : credentials;
-                if (typeof cfg === "string") {
-                    return cred ? { connection: cfg, credentials: cred } : cfg;
-                }
-                return cred ? { ...cfg, credentials: cred } : cfg;
-            });
-            const instance = new DocStack(...mergedConfig as StackConfig[]);
+        if (!mergedConfig.length) return;
+
+        if (docStackRef.current === null) {
+            console.log("DocStack provider - init instance", { config: mergedConfig });
+            const instance = new DocStack(...mergedConfig);
             docStackRef.current = instance;
-            docStackRef.current.addEventListener("ready", setsDocStackWhenReady);
+            instance.addEventListener("ready", setsDocStackWhenReady);
+            instance.addEventListener("stack-added", signalStacksChanged);
+            instance.addEventListener("stack-removed", signalStacksChanged);
+            return;
         }
 
-        // Optional: Cleanup function to remove listeners
-        return () => {
-            if (docStackRef.current) {
-                // docStackRef.current.removeEventListener("ready", setsDocStackWhenReady);
-                // docStackRef.current.getStore().removeAllListeners();
+        const instance = docStackRef.current;
+        let cancelled = false;
+
+        const reconcile = async () => {
+            if (cancelled) return;
+
+            const wanted = new Map(mergedConfig.map(cfg => [stackKey(cfg), cfg]));
+
+            for (const stack of [...instance.getStacks()]) {
+                if (cancelled) return;
+                if (!wanted.has(stack.name)) {
+                    console.log("DocStack provider - closing stack dropped from config", { name: stack.name });
+                    await instance.removeStack(stack.name, { destroy: destroyRemovedStacks });
+                }
+            }
+
+            for (const [name, cfg] of wanted) {
+                if (cancelled) return;
+                if (!instance.getStack(name)) {
+                    console.log("DocStack provider - opening stack added to config", { name });
+                    await instance.addStack(cfg);
+                }
             }
         };
-    }, [config, credentials, setsDocStackWhenReady]);
+
+        reconciling.current = reconciling.current.then(reconcile).catch(error => {
+            console.error("DocStack provider - failed to reconcile stacks", error);
+        });
+
+        return () => {
+            cancelled = true;
+        };
+    }, [mergedConfig, destroyRemovedStacks, setsDocStackWhenReady]);
 
     return (
         <DocStackContext.Provider value={docStack}>
@@ -106,4 +190,4 @@ const StackProvider = (props: DocStackProviderProps) => {
     );
 };
 
-export default StackProvider;
+export default StackProvider;