stopAutoSave(state) - Stop Automatic Saving

Quick Start (30 seconds)

const formState = state({ name: '', email: '' });

// Enable auto-save
autoSave(formState, 'form', {
  autoSave: true,
  debounce: 500
});

// Changes save automatically
formState.name = 'Alice'; // Saves after 500ms

// Stop auto-saving
stopAutoSave(formState);

// Now changes don't save automatically
formState.email = 'alice@example.com'; // Doesn't save

// Manual save still works
save(formState); // Saves manually ✨

What just happened? You paused automatic saving while keeping the state and manual save functionality!

What is stopAutoSave(state)?

stopAutoSave(state) is a function that disables automatic saving for a state while preserving all other functionality.

Simply put: it pauses the auto-save feature but keeps everything else working - you can still save manually, load, and use all other methods.

Think of it as pausing automatic pilot while keeping manual controls available.

Syntax

stopAutoSave(state)

Parameters:

• state - The reactive state object with auto-save enabled

Returns: The state object (for chaining)

Why Does This Exist?

The Problem: Can't Pause Auto-Save

Sometimes you need to temporarily disable auto-save:

const formState = state({ fields: {} });
autoSave(formState, 'form', { autoSave: true });

// Need to make many rapid changes
for (let i = 0; i < 100; i++) {
  formState.fields[`field${i}`] = `value${i}`;
  // Each change triggers save! ❌
  // 100 save operations! ❌
  // Can't pause it! ❌
}

Problems: ❌ Can't pause - Auto-save always active
❌ Too many saves - Performance issues
❌ No control - Can't disable temporarily

The Solution

// Stop auto-save before bulk changes
stopAutoSave(formState);

// Make changes without saving
for (let i = 0; i < 100; i++) {
  formState.fields[`field${i}`] = `value${i}`;
}

// Save once when done
save(formState);

// Resume auto-save
startAutoSave(formState);

Benefits: ✅ Pausable - Stop and resume as needed
✅ Performance - Avoid excessive saves
✅ Full control - Enable/disable on demand

How Does It Work?

State with auto-save active
        |
        v
stopAutoSave(state) called
        |
        v
Effect watcher removed
        |
        v
Changes no longer trigger saves
        |
        v
Manual saves still work ✨

Basic Usage

Example 1: Pause and Resume

const state = state({ count: 0 });
autoSave(state, 'counter', { autoSave: true });

state.count = 1; // Auto-saves

// Pause
stopAutoSave(state);

state.count = 2; // Doesn't save
state.count = 3; // Doesn't save

// Resume
startAutoSave(state);

state.count = 4; // Auto-saves again

Example 2: Bulk Operations

const data = state({ items: [] });
autoSave(data, 'data', { autoSave: true, debounce: 500 });

// Stop before bulk insert
stopAutoSave(data);

// Add many items
for (let i = 0; i < 1000; i++) {
  data.items.push({ id: i, value: i * 2 });
}

// Save once
save(data);

// Resume auto-save
startAutoSave(data);

Example 3: Conditional Auto-Save

const settings = state({ theme: 'light' });
autoSave(settings, 'settings', { autoSave: true });

// User toggles auto-save preference
function toggleAutoSave(enabled) {
  if (enabled) {
    startAutoSave(settings);
  } else {
    stopAutoSave(settings);
  }
}

Real-World Examples

Example 1: Form Draft Control

const draftState = state({ content: '', title: '' });

autoSave(draftState, 'draft', {
  autoSave: true,
  debounce: 1000
});

// User clicks "Don't save changes"
document.getElementById('discard-btn').onclick = () => {
  stopAutoSave(draftState);
  clear(draftState);
  window.location.href = '/';
};

// User clicks "Save"
document.getElementById('save-btn').onclick = () => {
  save(draftState);
  startAutoSave(draftState);
};

Example 2: Import Data Without Saving

const appState = state({ data: [] });
autoSave(appState, 'app', { autoSave: true });

async function importData(file) {
  // Pause auto-save during import
  stopAutoSave(appState);
  
  try {
    const data = await parseFile(file);
    
    // Load imported data
    appState.data = data;
    
    // Ask user
    if (confirm('Save imported data?')) {
      save(appState);
      startAutoSave(appState);
    } else {
      // Discard import
      load(appState); // Reload old data
      startAutoSave(appState);
    }
  } catch (error) {
    console.error('Import failed:', error);
    startAutoSave(appState);
  }
}

Example 3: Network-Aware Auto-Save

const state = state({ content: '' });
autoSave(state, 'doc', { autoSave: true });

// Stop auto-save when offline
window.addEventListener('offline', () => {
  stopAutoSave(state);
  showToast('Auto-save paused (offline)');
});

// Resume when online
window.addEventListener('online', () => {
  startAutoSave(state);
  save(state); // Save pending changes
  showToast('Auto-save resumed');
});

Example 4: Performance Mode

const largeState = state({ items: [] });
autoSave(largeState, 'data', { autoSave: true });

// Enable performance mode
function enablePerformanceMode() {
  stopAutoSave(largeState);
  
  // Save periodically instead
  setInterval(() => {
    save(largeState);
  }, 30000); // Every 30 seconds
}

// Disable performance mode
function disablePerformanceMode() {
  startAutoSave(largeState);
  clearInterval(saveInterval);
}

Example 5: Transaction Pattern

const cartState = state({ items: [], total: 0 });
autoSave(cartState, 'cart', { autoSave: true });

async function checkout() {
  // Stop auto-save during transaction
  stopAutoSave(cartState);
  
  try {
    // Process payment
    await processPayment(cartState.items);
    
    // Success - clear cart
    cartState.items = [];
    cartState.total = 0;
    save(cartState);

    startAutoSave(cartState);
  } catch (error) {
    // Error - restore cart
    load(cartState);
    startAutoSave(cartState);
    
    alert('Payment failed. Cart restored.');
  }
}

Common Patterns

Pattern 1: Batch Updates

function batchUpdate(stateObj, updates) {
  stopAutoSave(stateObj);

  Object.assign(stateObj, updates);

  save(stateObj);
  startAutoSave(stateObj);
}

// Usage
batchUpdate(settings, {
  theme: 'dark',
  fontSize: 16,
  language: 'en'
});

Pattern 2: Conditional Saving

function updateWithValidation(stateObj, data) {
  stopAutoSave(stateObj);

  Object.assign(stateObj, data);

  if (validate(stateObj)) {
    save(stateObj);
  } else {
    load(stateObj); // Rollback
  }

  startAutoSave(stateObj);
}

Pattern 3: Temporary Pause

async function performOperation(stateObj, operation) {
  stopAutoSave(stateObj);

  try {
    await operation(stateObj);
    save(stateObj);
  } finally {
    startAutoSave(stateObj);
  }
}

Alternative: Namespace Functions

You can use namespace functions for all storage operations:

const myState = state({ value: 0 });
autoSave(myState, 'data', { autoSave: true });

// Using namespace functions
stopAutoSave(myState);

// Make changes
myState.value = 10;

// Resume
startAutoSave(myState);

Important Notes

Manual Saves Still Work

stopAutoSave(myState);

// Changes don't auto-save
myState.value = 10;

// But manual save works
save(myState); // ✅ Works

Other Methods Unaffected

stopAutoSave(myState);

// These all still work:
load(myState);        // ✅ Works
clear(myState);       // ✅ Works
exists(myState);      // ✅ Works
storageInfo(myState); // ✅ Works

Can Be Called Multiple Times

stopAutoSave(state);
stopAutoSave(state); // Safe - no error
stopAutoSave(state); // No effect if already stopped

When to Use

Use stopAutoSave() For:

✅ Bulk operations - Many rapid changes
✅ Imports - Loading external data
✅ Transactions - All-or-nothing saves
✅ Performance - Reduce save frequency
✅ User control - Toggle auto-save
✅ Network issues - Pause when offline

Don't Use For:

❌ Single changes - Just make the change
❌ Permanent disable - Use autoSave: false option
❌ Already stopped - Check if needed first

Comparison with Options

Using stopAutoSave()

// Enable with auto-save
autoSave(state, 'data', { autoSave: true });

// Pause temporarily
stopAutoSave(state);
// ... changes ...
startAutoSave(state);

Using autoSave Option

// Disable from start
autoSave(state, 'data', { autoSave: false });

// Always manual
myState.value = 10;
save(myState);

Choose stopAutoSave() when: Need to pause/resume dynamically
Choose autoSave: false when: Never want automatic saving

Summary

What is stopAutoSave(state)?
A function that disables automatic saving while preserving all other functionality.

Why use it?

• ✅ Pause auto-save temporarily
• ✅ Improve performance for bulk operations
• ✅ Control when saves occur
• ✅ Handle transactions properly

Key Takeaway:

With Auto-Save          Stop → Pause → Resume
      |                         |
Automatic saves         Manual control
      |                         |
Every change ✅        When you want ✅

Remember: Manual saves and other methods still work when auto-save is stopped! 🎉