DailyDevDiet

logo - dailydevdiet

Learn. Build. Innovate. Elevate your coding skills with dailydevdiet!

Menu
Twitter Linkedin Instagram Facebook-f

Chapter 33: State Persistence

By /
State Persistence

Introduction

State persistence is a crucial aspect of modern web applications that ensures user data and application state are maintained across browser sessions, page refreshes, and application restarts. In React applications, state is typically ephemeral and exists only during the component’s lifecycle. However, there are many scenarios where you need to persist state data to provide a seamless user experience.

Why State Persistence Matters

User Experience Benefits

  • Seamless Navigation: Users don’t lose their progress when navigating between pages
  • Form Data Retention: Partially filled forms are preserved during accidental refreshes
  • User Preferences: Settings and preferences persist across sessions
  • Shopping Cart Persistence: E-commerce applications maintain cart items
  • Authentication State: Users remain logged in across browser sessions

Common Use Cases

  • User authentication tokens
  • Shopping cart contents
  • User preferences and settings
  • Form data and draft content
  • Application theme and layout preferences
  • Recently viewed items
  • Search history

Browser Storage APIs

Local Storage

Local Storage provides persistent storage that remains available until explicitly cleared by the user or application.

// Basic Local Storage Operations
const saveToLocalStorage = (key, value) => {
  try {
    localStorage.setItem(key, JSON.stringify(value));
  } catch (error) {
    console.error('Error saving to localStorage:', error);
  }
};

const getFromLocalStorage = (key, defaultValue = null) => {
  try {
    const item = localStorage.getItem(key);
    return item ? JSON.parse(item) : defaultValue;
  } catch (error) {
    console.error('Error reading from localStorage:', error);
    return defaultValue;
  }
};

const removeFromLocalStorage = (key) => {
  try {
    localStorage.removeItem(key);
  } catch (error) {
    console.error('Error removing from localStorage:', error);
  }
};

Session Storage

Session Storage persists data only for the duration of the browser session.

// Session Storage Operations
const saveToSessionStorage = (key, value) => {
  try {
    sessionStorage.setItem(key, JSON.stringify(value));
  } catch (error) {
    console.error('Error saving to sessionStorage:', error);
  }
};

const getFromSessionStorage = (key, defaultValue = null) => {
  try {
    const item = sessionStorage.getItem(key);
    return item ? JSON.parse(item) : defaultValue;
  } catch (error) {
    console.error('Error reading from sessionStorage:', error);
    return defaultValue;
  }
};

Custom Hooks for State Persistence

useLocalStorage Hook

import { useState, useEffect } from 'react';

const useLocalStorage = (key, initialValue) => {
  // Get value from localStorage or use initial value
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(`Error reading localStorage key "${key}":`, error);
      return initialValue;
    }
  });

  // Return a wrapped version of useState's setter function that persists the new value to localStorage
  const setValue = (value) => {
    try {
      // Allow value to be a function so we have the same API as useState
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error(`Error setting localStorage key "${key}":`, error);
    }
  };

  // Listen for changes to localStorage from other tabs/windows
  useEffect(() => {
    const handleStorageChange = (e) => {
      if (e.key === key && e.newValue !== null) {
        try {
          setStoredValue(JSON.parse(e.newValue));
        } catch (error) {
          console.error(`Error parsing localStorage key "${key}":`, error);
        }
      }
    };

    window.addEventListener('storage', handleStorageChange);
    return () => window.removeEventListener('storage', handleStorageChange);
  }, [key]);

  return [storedValue, setValue];
};

export default useLocalStorage;

useSessionStorage Hook

import { useState, useEffect } from 'react';

const useSessionStorage = (key, initialValue) => {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.sessionStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(`Error reading sessionStorage key "${key}":`, error);
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.sessionStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error(`Error setting sessionStorage key "${key}":`, error);
    }
  };

  return [storedValue, setValue];
};

export default useSessionStorage;

Practical Examples

User Preferences Component

import React from 'react';
import useLocalStorage from './hooks/useLocalStorage';

const UserPreferences = () => {
  const [preferences, setPreferences] = useLocalStorage('userPreferences', {
    theme: 'light',
    language: 'en',
    notifications: true,
    autoSave: true
  });

  const updatePreference = (key, value) => {
    setPreferences(prev => ({
      ...prev,
      [key]: value
    }));
  };

  return (
    <div className="preferences-panel">
      <h2>User Preferences</h2>
     
      <div className="preference-item">
        <label>
          Theme:
          <select
            value={preferences.theme}
            onChange={(e) => updatePreference('theme', e.target.value)}
          >
            <option value="light">Light</option>
            <option value="dark">Dark</option>
            <option value="auto">Auto</option>
          </select>
        </label>
      </div>

      <div className="preference-item">
        <label>
          Language:
          <select
            value={preferences.language}
            onChange={(e) => updatePreference('language', e.target.value)}
          >
            <option value="en">English</option>
            <option value="es">Spanish</option>
            <option value="fr">French</option>
          </select>
        </label>
      </div>

      <div className="preference-item">
        <label>
          <input
            type="checkbox"
            checked={preferences.notifications}
            onChange={(e) => updatePreference('notifications', e.target.checked)}
          />
          Enable Notifications
        </label>
      </div>

      <div className="preference-item">
        <label>
          <input
            type="checkbox"
            checked={preferences.autoSave}
            onChange={(e) => updatePreference('autoSave', e.target.checked)}
          />
          Auto Save
        </label>
      </div>
    </div>
  );
};

export default UserPreferences;

Shopping Cart with Persistence

import React from 'react';
import useLocalStorage from './hooks/useLocalStorage';

const ShoppingCart = () => {
  const [cartItems, setCartItems] = useLocalStorage('shoppingCart', []);

  const addToCart = (product) => {
    setCartItems(prev => {
      const existingItem = prev.find(item => item.id === product.id);
      if (existingItem) {
        return prev.map(item =>
          item.id === product.id
            ? { ...item, quantity: item.quantity + 1 }
            : item
        );
      }
      return [...prev, { ...product, quantity: 1 }];
    });
  };

  const removeFromCart = (productId) => {
    setCartItems(prev => prev.filter(item => item.id !== productId));
  };

  const updateQuantity = (productId, quantity) => {
    if (quantity <= 0) {
      removeFromCart(productId);
      return;
    }
   
    setCartItems(prev =>
      prev.map(item =>
        item.id === productId
          ? { ...item, quantity }
          : item
      )
    );
  };

  const clearCart = () => {
    setCartItems([]);
  };

  const getTotalPrice = () => {
    return cartItems.reduce((total, item) => total + (item.price * item.quantity), 0);
  };

  return (
    <div className="shopping-cart">
      <h2>Shopping Cart ({cartItems.length} items)</h2>
     
      {cartItems.length === 0 ? (
        <p>Your cart is empty</p>
      ) : (
        <div>
          {cartItems.map(item => (
            <div key={item.id} className="cart-item">
              <h3>{item.name}</h3>
              <p>Price: ${item.price}</p>
              <div className="quantity-controls">
                <button onClick={() => updateQuantity(item.id, item.quantity - 1)}>
                  -
                </button>
                <span>Quantity: {item.quantity}</span>
                <button onClick={() => updateQuantity(item.id, item.quantity + 1)}>
                  +
                </button>
              </div>
              <button onClick={() => removeFromCart(item.id)}>
                Remove
              </button>
            </div>
          ))}
         
          <div className="cart-total">
            <h3>Total: ${getTotalPrice().toFixed(2)}</h3>
            <button onClick={clearCart}>Clear Cart</button>
          </div>
        </div>
      )}
    </div>
  );
};

export default ShoppingCart;

Form Data Persistence

import React, { useState, useEffect } from 'react';
import useLocalStorage from './hooks/useLocalStorage';

const PersistentForm = () => {
  const [formData, setFormData] = useLocalStorage('formDraft', {
    name: '',
    email: '',
    message: '',
    category: 'general'
  });

  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitted, setSubmitted] = useState(false);

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsSubmitting(true);

    try {
      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 2000));
     
      // Clear form data after successful submission
      setFormData({
        name: '',
        email: '',
        message: '',
        category: 'general'
      });
     
      setSubmitted(true);
    } catch (error) {
      console.error('Form submission error:', error);
    } finally {
      setIsSubmitting(false);
    }
  };

  const clearDraft = () => {
    setFormData({
      name: '',
      email: '',
      message: '',
      category: 'general'
    });
  };

  if (submitted) {
    return (
      <div className="success-message">
        <h2>Thank you!</h2>
        <p>Your message has been submitted successfully.</p>
        <button onClick={() => setSubmitted(false)}>
          Submit Another Message
        </button>
      </div>
    );
  }

  return (
    <div className="persistent-form">
      <h2>Contact Form</h2>
      <p className="draft-notice">
        Your draft is automatically saved as you type
      </p>
     
      <form onSubmit={handleSubmit}>
        <div className="form-group">
          <label htmlFor="name">Name:</label>
          <input
            type="text"
            id="name"
            name="name"
            value={formData.name}
            onChange={handleInputChange}
            required
          />
        </div>

        <div className="form-group">
          <label htmlFor="email">Email:</label>
          <input
            type="email"
            id="email"
            name="email"
            value={formData.email}
            onChange={handleInputChange}
            required
          />
        </div>

        <div className="form-group">
          <label htmlFor="category">Category:</label>
          <select
            id="category"
            name="category"
            value={formData.category}
            onChange={handleInputChange}
          >
            <option value="general">General Inquiry</option>
            <option value="support">Support</option>
            <option value="feedback">Feedback</option>
            <option value="business">Business</option>
          </select>
        </div>

        <div className="form-group">
          <label htmlFor="message">Message:</label>
          <textarea
            id="message"
            name="message"
            value={formData.message}
            onChange={handleInputChange}
            rows="6"
            required
          />
        </div>

        <div className="form-actions">
          <button
            type="submit"
            disabled={isSubmitting}
            className="submit-btn"
          >
            {isSubmitting ? 'Submitting...' : 'Submit Message'}
          </button>
          <button
            type="button"
            onClick={clearDraft}
            className="clear-btn"
          >
            Clear Draft
          </button>
        </div>
      </form>
    </div>
  );
};

export default PersistentForm;

Advanced Persistence Patterns

State Synchronization Across Tabs

import { useState, useEffect, useCallback } from 'react';

const useMultiTabSync = (key, initialValue) => {
  const [value, setValue] = useState(() => {
    try {
      const item = localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch {
      return initialValue;
    }
  });

  const updateValue = useCallback((newValue) => {
    const valueToStore = typeof newValue === 'function' ? newValue(value) : newValue;
    setValue(valueToStore);
    localStorage.setItem(key, JSON.stringify(valueToStore));
   
    // Dispatch custom event for same-tab synchronization
    window.dispatchEvent(new CustomEvent(`localStorage-${key}`, {
      detail: valueToStore
    }));
  }, [key, value]);

  useEffect(() => {
    // Listen for storage changes from other tabs
    const handleStorageChange = (e) => {
      if (e.key === key) {
        try {
          setValue(e.newValue ? JSON.parse(e.newValue) : initialValue);
        } catch {
          setValue(initialValue);
        }
      }
    };

    // Listen for custom events from same tab
    const handleCustomEvent = (e) => {
      setValue(e.detail);
    };

    window.addEventListener('storage', handleStorageChange);
    window.addEventListener(`localStorage-${key}`, handleCustomEvent);

    return () => {
      window.removeEventListener('storage', handleStorageChange);
      window.removeEventListener(`localStorage-${key}`, handleCustomEvent);
    };
  }, [key, initialValue]);

  return [value, updateValue];
};

export default useMultiTabSync;

Debounced State Persistence

import { useState, useEffect, useRef } from 'react';

const useDebouncedLocalStorage = (key, initialValue, delay = 500) => {
  const [value, setValue] = useState(() => {
    try {
      const item = localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch {
      return initialValue;
    }
  });

  const timeoutRef = useRef();

  useEffect(() => {
    // Clear existing timeout
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }

    // Set new timeout
    timeoutRef.current = setTimeout(() => {
      try {
        localStorage.setItem(key, JSON.stringify(value));
      } catch (error) {
        console.error('Error saving to localStorage:', error);
      }
    }, delay);

    // Cleanup timeout on unmount
    return () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
    };
  }, [key, value, delay]);

  return [value, setValue];
};

export default useDebouncedLocalStorage;

State Compression and Optimization

Large State Compression

// Utility for compressing large state objects
const compressState = (state) => {
  try {
    const jsonString = JSON.stringify(state);
    // Simple compression - remove unnecessary whitespace and repeated patterns
    return jsonString.replace(/\s+/g, ' ').trim();
  } catch (error) {
    console.error('Error compressing state:', error);
    return null;
  }
};

const decompressState = (compressedState, fallback = {}) => {
  try {
    return JSON.parse(compressedState);
  } catch (error) {
    console.error('Error decompressing state:', error);
    return fallback;
  }
};

// Hook for large state persistence with compression
const useCompressedLocalStorage = (key, initialValue) => {
  const [value, setValue] = useState(() => {
    try {
      const compressed = localStorage.getItem(key);
      return compressed ? decompressState(compressed, initialValue) : initialValue;
    } catch {
      return initialValue;
    }
  });

  const setCompressedValue = (newValue) => {
    const valueToStore = typeof newValue === 'function' ? newValue(value) : newValue;
    setValue(valueToStore);
   
    const compressed = compressState(valueToStore);
    if (compressed) {
      localStorage.setItem(key, compressed);
    }
  };

  return [value, setCompressedValue];
};

IndexedDB for Complex Data

IndexedDB Wrapper

class IndexedDBManager {
  constructor(dbName, version = 1) {
    this.dbName = dbName;
    this.version = version;
    this.db = null;
  }

  async init(stores = []) {
    return new Promise((resolve, reject) => {
      const request = indexedDB.open(this.dbName, this.version);

      request.onerror = () => reject(request.error);
      request.onsuccess = () => {
        this.db = request.result;
        resolve(this.db);
      };

      request.onupgradeneeded = (event) => {
        const db = event.target.result;
        stores.forEach(store => {
          if (!db.objectStoreNames.contains(store.name)) {
            const objectStore = db.createObjectStore(store.name, store.options);
            if (store.indexes) {
              store.indexes.forEach(index => {
                objectStore.createIndex(index.name, index.keyPath, index.options);
              });
            }
          }
        });
      };
    });
  }

  async save(storeName, data) {
    const transaction = this.db.transaction([storeName], 'readwrite');
    const store = transaction.objectStore(storeName);
    return store.put(data);
  }

  async get(storeName, key) {
    const transaction = this.db.transaction([storeName], 'readonly');
    const store = transaction.objectStore(storeName);
    return store.get(key);
  }

  async getAll(storeName) {
    const transaction = this.db.transaction([storeName], 'readonly');
    const store = transaction.objectStore(storeName);
    return store.getAll();
  }

  async delete(storeName, key) {
    const transaction = this.db.transaction([storeName], 'readwrite');
    const store = transaction.objectStore(storeName);
    return store.delete(key);
  }
}

// React hook for IndexedDB
const useIndexedDB = (dbName, storeName, initialValue = null) => {
  const [data, setData] = useState(initialValue);
  const [db, setDb] = useState(null);

  useEffect(() => {
    const initDB = async () => {
      const dbManager = new IndexedDBManager(dbName);
      await dbManager.init([
        {
          name: storeName,
          options: { keyPath: 'id', autoIncrement: true }
        }
      ]);
      setDb(dbManager);
    };

    initDB();
  }, [dbName, storeName]);

  const saveData = async (data) => {
    if (db) {
      await db.save(storeName, data);
      setData(data);
    }
  };

  const loadData = async (key) => {
    if (db) {
      const result = await db.get(storeName, key);
      setData(result);
      return result;
    }
  };

  const loadAllData = async () => {
    if (db) {
      const results = await db.getAll(storeName);
      setData(results);
      return results;
    }
  };

  return { data, saveData, loadData, loadAllData };
};


Security Considerations

Sensitive Data Handling

// Simple encryption utility (for demonstration - use proper encryption in production)
const encryptData = (data, key) => {
  // In production, use a proper encryption library like crypto-js
  const encrypted = btoa(JSON.stringify(data) + key);
  return encrypted;
};

const decryptData = (encryptedData, key) => {
  try {
    const decrypted = atob(encryptedData);
    const data = decrypted.replace(key, '');
    return JSON.parse(data);
  } catch {
    return null;
  }
};

// Secure storage hook
const useSecureStorage = (key, initialValue, encryptionKey) => {
  const [value, setValue] = useState(() => {
    try {
      const encrypted = localStorage.getItem(key);
      if (encrypted && encryptionKey) {
        const decrypted = decryptData(encrypted, encryptionKey);
        return decrypted || initialValue;
      }
      return initialValue;
    } catch {
      return initialValue;
    }
  });

  const setSecureValue = (newValue) => {
    const valueToStore = typeof newValue === 'function' ? newValue(value) : newValue;
    setValue(valueToStore);
   
    if (encryptionKey) {
      const encrypted = encryptData(valueToStore, encryptionKey);
      localStorage.setItem(key, encrypted);
    } else {
      localStorage.setItem(key, JSON.stringify(valueToStore));
    }
  };

  return [value, setSecureValue];
};

Best Practices

1. Data Validation and Error Handling

const validateAndSanitizeData = (data, schema) => {
  // Implement data validation logic
  try {
    // Basic validation example
    if (typeof data !== 'object' || data === null) {
      throw new Error('Invalid data format');
    }
   
    // Sanitize data by removing potentially harmful properties
    const sanitized = { ...data };
    delete sanitized.__proto__;
    delete sanitized.constructor;
   
    return sanitized;
  } catch (error) {
    console.error('Data validation failed:', error);
    return null;
  }
};

2. Storage Quota Management

const checkStorageQuota = () => {
  if ('storage' in navigator && 'estimate' in navigator.storage) {
    navigator.storage.estimate().then(estimate => {
      const percentage = (estimate.usage / estimate.quota) * 100;
      console.log(`Storage used: ${percentage.toFixed(2)}%`);
     
      if (percentage > 80) {
        console.warn('Storage quota nearly exceeded');
        // Implement cleanup logic
      }
    });
  }
};

const cleanupOldData = (maxAge = 30 * 24 * 60 * 60 * 1000) => { // 30 days
  const now = Date.now();
 
  for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i);
    try {
      const data = JSON.parse(localStorage.getItem(key));
      if (data.timestamp && (now - data.timestamp) > maxAge) {
        localStorage.removeItem(key);
        console.log(`Cleaned up old data: ${key}`);
      }
    } catch {
      // Skip invalid JSON data
    }
  }
};

3. Performance Optimization

// Lazy loading for large datasets
const useLazyPersistence = (key, loader, dependencies = []) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const loadData = async () => {
      setLoading(true);
      try {
        // Try to load from cache first
        const cached = localStorage.getItem(key);
        if (cached) {
          const parsed = JSON.parse(cached);
          if (Date.now() - parsed.timestamp < 5 * 60 * 1000) { // 5 minutes cache
            setData(parsed.data);
            setLoading(false);
            return;
          }
        }

        // Load fresh data
        const freshData = await loader();
        const dataWithTimestamp = {
          data: freshData,
          timestamp: Date.now()
        };
       
        localStorage.setItem(key, JSON.stringify(dataWithTimestamp));
        setData(freshData);
      } catch (error) {
        console.error('Error loading data:', error);
      } finally {
        setLoading(false);
      }
    };

    loadData();
  }, dependencies);

  return { data, loading };
};

Testing State Persistence

Unit Tests for Persistence Hooks

import { renderHook, act } from '@testing-library/react';
import useLocalStorage from './useLocalStorage';

// Mock localStorage
const localStorageMock = {
  getItem: jest.fn(),
  setItem: jest.fn(),
  removeItem: jest.fn(),
};

Object.defineProperty(window, 'localStorage', {
  value: localStorageMock
});

describe('useLocalStorage', () => {
  beforeEach(() => {
    localStorageMock.getItem.mockClear();
    localStorageMock.setItem.mockClear();
    localStorageMock.removeItem.mockClear();
  });

  test('should return initial value when localStorage is empty', () => {
    localStorageMock.getItem.mockReturnValue(null);
   
    const { result } = renderHook(() => useLocalStorage('test-key', 'initial'));
   
    expect(result.current[0]).toBe('initial');
  });

  test('should return stored value from localStorage', () => {
    localStorageMock.getItem.mockReturnValue(JSON.stringify('stored-value'));
   
    const { result } = renderHook(() => useLocalStorage('test-key', 'initial'));
   
    expect(result.current[0]).toBe('stored-value');
  });

  test('should update localStorage when value changes', () => {
    localStorageMock.getItem.mockReturnValue(null);
   
    const { result } = renderHook(() => useLocalStorage('test-key', 'initial'));
   
    act(() => {
      result.current[1]('new-value');
    });
   
    expect(localStorageMock.setItem).toHaveBeenCalledWith(
      'test-key',
      JSON.stringify('new-value')
    );
    expect(result.current[0]).toBe('new-value');
  });
});

Summary

State persistence is essential for creating robust React applications that provide excellent user experiences. Key takeaways from this chapter:

Storage Options:

  • Local Storage for long-term persistence
  • Session Storage for temporary persistence
  • IndexedDB for complex data and large datasets

Implementation Patterns:

  • Custom hooks for reusable persistence logic
  • Debounced updates for performance
  • Multi-tab synchronization for consistency
  • Compression for large datasets

Security and Performance:

  • Data validation and sanitization
  • Storage quota management
  • Encryption for sensitive data
  • Lazy loading for large datasets

Best Practices:

  • Always handle errors gracefully
  • Implement fallbacks for when storage is unavailable
  • Consider data migration strategies
  • Test persistence functionality thoroughly

In the next chapter, we’ll explore React Native basics and how to apply React concepts to mobile development.

Related Articles

Related Posts

Scroll to Top