cleanup complete transactions (#371)

Author: samwillis

.changeset/purple-parts-sip.md

@@ -0,0 +1,5 @@
+---
+"@tanstack/db": patch
+---
+
+Cleanup transactions after they complete to prevent memory leak and performance degradation

packages/db/src/collection.ts

@@ -703,12 +703,9 @@ export class CollectionImpl<
     this.optimisticDeletes.clear()
 
     const activeTransactions: Array<Transaction<any>> = []
-    const completedTransactions: Array<Transaction<any>> = []
 
     for (const transaction of this.transactions.values()) {
-      if (transaction.state === `completed`) {
-        completedTransactions.push(transaction)
-      } else if (![`completed`, `failed`].includes(transaction.state)) {
+      if (![`completed`, `failed`].includes(transaction.state)) {
         activeTransactions.push(transaction)
       }
     }
@@ -761,7 +758,6 @@ export class CollectionImpl<
     // IMPORTANT: Skip complex filtering for user-triggered actions to prevent UI blocking
     if (this.pendingSyncedTransactions.length > 0 && !triggeredByUserAction) {
       const pendingSyncKeys = new Set<TKey>()
-      const completedTransactionMutations = new Set<string>()
 
       // Collect keys from pending sync operations
       for (const transaction of this.pendingSyncedTransactions) {
@@ -770,15 +766,6 @@ export class CollectionImpl<
         }
       }
 
-      // Collect mutation IDs from completed transactions
-      for (const tx of completedTransactions) {
-        for (const mutation of tx.mutations) {
-          if (mutation.collection === this) {
-            completedTransactionMutations.add(mutation.mutationId)
-          }
-        }
-      }
-
       // Only filter out delete events for keys that:
       // 1. Have pending sync operations AND
       // 2. Are from completed transactions (being cleaned up)
@@ -1290,6 +1277,30 @@ export class CollectionImpl<
     }
   }
 
+  /**
+   * Schedule cleanup of a transaction when it completes
+   * @private
+   */
+  private scheduleTransactionCleanup(transaction: Transaction<any>): void {
+    // Only schedule cleanup for transactions that aren't already completed
+    if (transaction.state === `completed`) {
+      this.transactions.delete(transaction.id)
+      return
+    }
+
+    // Schedule cleanup when the transaction completes
+    transaction.isPersisted.promise
+      .then(() => {
+        // Transaction completed successfully, remove it immediately
+        this.transactions.delete(transaction.id)
+      })
+      .catch(() => {
+        // Transaction failed, but we want to keep failed transactions for reference
+        // so don't remove it.
+        // This empty catch block is necessary to prevent unhandled promise rejections.
+      })
+  }
+
   private ensureStandardSchema(schema: unknown): StandardSchema<T> {
     // If the schema already implements the standard-schema interface, return it
     if (schema && `~standard` in (schema as {})) {
@@ -1650,6 +1661,7 @@ export class CollectionImpl<
       ambientTransaction.applyMutations(mutations)
 
       this.transactions.set(ambientTransaction.id, ambientTransaction)
+      this.scheduleTransactionCleanup(ambientTransaction)
       this.recomputeOptimisticState(true)
 
       return ambientTransaction
@@ -1675,6 +1687,7 @@ export class CollectionImpl<
 
       // Add the transaction to the collection's transactions store
       this.transactions.set(directOpTransaction.id, directOpTransaction)
+      this.scheduleTransactionCleanup(directOpTransaction)
       this.recomputeOptimisticState(true)
 
       return directOpTransaction
@@ -1864,6 +1877,8 @@ export class CollectionImpl<
         mutationFn: async () => {},
       })
       emptyTransaction.commit()
+      // Schedule cleanup for empty transaction
+      this.scheduleTransactionCleanup(emptyTransaction)
       return emptyTransaction
     }
 
@@ -1872,6 +1887,7 @@ export class CollectionImpl<
       ambientTransaction.applyMutations(mutations)
 
       this.transactions.set(ambientTransaction.id, ambientTransaction)
+      this.scheduleTransactionCleanup(ambientTransaction)
       this.recomputeOptimisticState(true)
 
       return ambientTransaction
@@ -1901,6 +1917,7 @@ export class CollectionImpl<
     // Add the transaction to the collection's transactions store
 
     this.transactions.set(directOpTransaction.id, directOpTransaction)
+    this.scheduleTransactionCleanup(directOpTransaction)
     this.recomputeOptimisticState(true)
 
     return directOpTransaction
@@ -1988,6 +2005,7 @@ export class CollectionImpl<
       ambientTransaction.applyMutations(mutations)
 
       this.transactions.set(ambientTransaction.id, ambientTransaction)
+      this.scheduleTransactionCleanup(ambientTransaction)
       this.recomputeOptimisticState(true)
 
       return ambientTransaction
@@ -2014,6 +2032,7 @@ export class CollectionImpl<
     directOpTransaction.commit()
 
     this.transactions.set(directOpTransaction.id, directOpTransaction)
+    this.scheduleTransactionCleanup(directOpTransaction)
     this.recomputeOptimisticState(true)
 
     return directOpTransaction

packages/db/tests/collection.test.ts

@@ -264,15 +264,9 @@ describe(`Collection`, () => {
       value: `bar`,
     })
 
-    // after mutationFn returns, check that the transaction is updated &
-    // optimistic update is gone & synced data & comibned state are all updated.
-    expect(
-      // @ts-expect-error possibly undefined is ok in test
-      Array.from(collection.transactions.values())[0].mutations[0].changes
-    ).toEqual({
-      id: 1,
-      value: `bar`,
-    })
+    // after mutationFn returns, check that the transaction is cleaned up,
+    // optimistic update is gone & synced data & combined state are all updated.
+    expect(collection.transactions.size).toEqual(0) // Transaction should be cleaned up
     expect(collection.state).toEqual(
       new Map([[insertedKey, { id: 1, value: `bar` }]])
     )