BO01 Batch Operations with applyChanges

Perform multiple create, update, and delete operations in a single call

Live Demo
Activity Log

Try the operations on the right.

Operations

Click nodes to select for deletion

Description

The applyChanges() method allows you to perform multiple tree operations in a single call with a single re-render.

Benefits
  • Performance - Single re-render for all changes
  • Atomicity - All operations processed together
  • Error tracking - Detailed failure info
API
type TreeChange<T> =
  | { operation: 'create'; parentPath: string; data: T }
  | { operation: 'update'; path: string; data: Partial<T> }
  | { operation: 'delete'; path: string };

interface ApplyChangesResult {
  successful: number;
  failed: Array<{
    index: number;
    operation: string;
    path: string;
    error: string;
  }>;
}

BO02 Code Examples

Common patterns for using applyChanges

Code
Batch Create
const changes = [
  { operation: 'create', parentPath: 'folder1', data: { id: 1, name: 'File A' } },
  { operation: 'create', parentPath: 'folder1', data: { id: 2, name: 'File B' } },
  { operation: 'create', parentPath: 'folder2', data: { id: 3, name: 'File C' } }
];
const result = treeRef.applyChanges(changes);
console.log(`Created ${result.successful} nodes`);
Batch Update
const changes = [
  { operation: 'update', path: '1.1', data: { name: 'New Name', status: 'active' } },
  { operation: 'update', path: '1.2', data: { name: 'Another Name' } },
  { operation: 'update', path: '2.1', data: { icon: '📋' } }
];
treeRef.applyChanges(changes);
Batch Delete
const changes = [
  { operation: 'delete', path: '1.1' },
  { operation: 'delete', path: '1.2' },
  { operation: 'delete', path: '2.1' }
];
const result = treeRef.applyChanges(changes);
if (result.failed.length > 0) {
  console.error('Some deletions failed:', result.failed);
}
Replace Branch
const oldChildren = treeRef.getChildren(folderPath);
const newChildren = await fetchFromServer(folderPath);

const changes = [
  ...oldChildren.map(c => ({ operation: 'delete', path: c.path })),
  ...newChildren.map(c => ({ operation: 'create', parentPath: folderPath, data: c }))
];

treeRef.applyChanges(changes);
Use Case
Batch Create

Add multiple nodes at once after importing data, loading from API, or bulk user action.

Batch Update

Update properties across multiple nodes - rename, change status, toggle flags, etc.

Batch Delete

Remove multiple selected nodes. Check result.failed for any nodes that couldn't be deleted.

Replace Branch

Refresh a folder's contents from server - delete old children and add new ones in one operation.

When to Use
When to use applyChanges
  • Multiple operations - When you have 2+ changes to make
  • Performance critical - Large trees where re-renders are costly
  • Atomic updates - When changes are logically related
  • Server sync - Applying a batch of changes from an API response
When to use individual methods
  • Single change - Just use addNode(), updateNode(), or removeNode() directly
  • Immediate feedback - When each change needs individual error handling
Error Handling

Always check result.failed array for operations that didn't succeed. Each failure includes the index, operation type, path, and error message.