State Management Without Libraries: Vanilla JavaScript Approaches

Introduction

While state management libraries like Redux, MobX, and Zustand are popular, many applications can benefit from lightweight, custom state management solutions. Building your own state management system gives you complete control, eliminates dependencies, and often results in simpler, more maintainable code.

This guide explores practical approaches to managing application state using only vanilla JavaScript, from simple reactive patterns to complex nested state architectures.

Simple Reactive State

Basic Observable State

Let's start with a simple reactive state implementation:

// Simple reactive state manager
class ReactiveState {
  constructor(initialState = {}) {
    this._state = { ...initialState };
    this._subscribers = new Set();
  }

  // Get current state (immutable)
  getState() {
    return { ...this._state };
  }

  // Subscribe to state changes
  subscribe(callback) {
    this._subscribers.add(callback);
    
    // Return unsubscribe function
    return () => {
      this._subscribers.delete(callback);
    };
  }

  // Update state and notify subscribers
  setState(updates) {
    const prevState = this.getState();
    this._state = { ...this._state, ...updates };
    
    // Notify all subscribers
    this._subscribers.forEach(callback => {
      try {
        callback(this.getState(), prevState);
      } catch (error) {
        console.error('Error in state subscriber:', error);
      }
    });
  }

  // Reset to initial state
  reset(initialState = {}) {
    this._state = { ...initialState };
    this._subscribers.forEach(callback => {
      callback(this.getState(), {});
    });
  }
}

// Usage example
const appState = new ReactiveState({
  user: null,
  theme: 'light',
  notifications: []
});

// Subscribe to state changes
const unsubscribe = appState.subscribe((newState, prevState) => {
  console.log('State changed:', {
    from: prevState,
    to: newState
  });
  
  // Update UI based on state changes
  updateUI(newState);
});

// Update state
appState.setState({
  user: { name: 'John Doe', email: 'john@example.com' },
  theme: 'dark'
});

Computed Properties and Derived State

// Enhanced state manager with computed properties
class ComputedState extends ReactiveState {
  constructor(initialState = {}, computedProperties = {}) {
    super(initialState);
    this._computed = computedProperties;
    this._computedCache = new Map();
  }

  getState() {
    const baseState = super.getState();
    const computedState = {};

    // Calculate computed properties
    Object.entries(this._computed).forEach(([key, computeFn]) => {
      try {
        // Simple memoization
        const cacheKey = JSON.stringify(baseState);
        if (this._computedCache.has(`${key}:${cacheKey}`)) {
          computedState[key] = this._computedCache.get(`${key}:${cacheKey}`);
        } else {
          const value = computeFn(baseState);
          this._computedCache.set(`${key}:${cacheKey}`, value);
          computedState[key] = value;
        }
      } catch (error) {
        console.error(`Error computing ${key}:`, error);
        computedState[key] = null;
      }
    });

    return { ...baseState, ...computedState };
  }

  setState(updates) {
    // Clear computed cache when state changes
    this._computedCache.clear();
    super.setState(updates);
  }
}

// Example with computed properties
const shoppingCartState = new ComputedState(
  {
    items: [],
    tax: 0.08,
    discountCode: null
  },
  {
    // Computed: total items count
    itemCount: (state) => state.items.length,
    
    // Computed: subtotal
    subtotal: (state) => state.items.reduce((sum, item) => {
      return sum + (item.price * item.quantity);
    }, 0),
    
    // Computed: tax amount
    taxAmount: (state) => {
      const subtotal = state.items.reduce((sum, item) => {
        return sum + (item.price * item.quantity);
      }, 0);
      return subtotal * state.tax;
    },
    
    // Computed: total with tax
    total: (state) => {
      const subtotal = state.items.reduce((sum, item) => {
        return sum + (item.price * item.quantity);
      }, 0);
      const tax = subtotal * state.tax;
      return subtotal + tax;
    },
    
    // Computed: is cart empty
    isEmpty: (state) => state.items.length === 0
  }
);

// Usage
shoppingCartState.setState({
  items: [
    { id: 1, name: 'Laptop', price: 999, quantity: 1 },
    { id: 2, name: 'Mouse', price: 29, quantity: 2 }
  ]
});

const state = shoppingCartState.getState();
console.log({
  itemCount: state.itemCount,     // 2
  subtotal: state.subtotal,       // 1057
  taxAmount: state.taxAmount,     // 84.56
  total: state.total,             // 1141.56
  isEmpty: state.isEmpty          // false
});

Action-Based State Management

Redux-Like Pattern Without Redux

// Action-based state manager
class ActionState {
  constructor(initialState = {}, reducers = {}) {
    this._state = { ...initialState };
    this._reducers = reducers;
    this._subscribers = new Set();
    this._middlewares = [];
  }

  // Add middleware for side effects
  use(middleware) {
    this._middlewares.push(middleware);
  }

  // Subscribe to state changes
  subscribe(callback) {
    this._subscribers.add(callback);
    return () => this._subscribers.delete(callback);
  }

  // Get current state
  getState() {
    return { ...this._state };
  }

  // Dispatch action
  async dispatch(action) {
    // Run middlewares
    let processedAction = action;
    
    for (const middleware of this._middlewares) {
      processedAction = await middleware(processedAction, this.getState(), this);
      if (!processedAction) break; // Middleware can cancel action
    }

    if (!processedAction) return;

    // Find and execute reducer
    const { type, payload } = processedAction;
    const reducer = this._reducers[type];

    if (!reducer) {
      console.warn(`No reducer found for action type: ${type}`);
      return;
    }

    try {
      const prevState = this.getState();
      const newState = reducer(prevState, payload);
      
      // Ensure immutability
      this._state = { ...newState };
      
      // Notify subscribers
      this._subscribers.forEach(callback => {
        callback(this.getState(), prevState, action);
      });
      
      return processedAction;
    } catch (error) {
      console.error(`Error in reducer for ${type}:`, error);
    }
  }
}

// Todo app example
const todoReducers = {
  ADD_TODO: (state, todo) => ({
    ...state,
    todos: [
      ...state.todos,
      {
        id: Date.now(),
        text: todo.text,
        completed: false,
        createdAt: new Date().toISOString()
      }
    ]
  }),

  TOGGLE_TODO: (state, { id }) => ({
    ...state,
    todos: state.todos.map(todo =>
      todo.id === id
        ? { ...todo, completed: !todo.completed }
        : todo
    )
  }),

  DELETE_TODO: (state, { id }) => ({
    ...state,
    todos: state.todos.filter(todo => todo.id !== id)
  }),

  SET_FILTER: (state, { filter }) => ({
    ...state,
    filter
  }),

  SET_LOADING: (state, { loading }) => ({
    ...state,
    loading
  })
};

// Create store
const todoStore = new ActionState(
  {
    todos: [],
    filter: 'all', // all, active, completed
    loading: false
  },
  todoReducers
);

// Middleware for logging
const loggerMiddleware = (action, state, store) => {
  console.group(`Action: ${action.type}`);
  console.log('Payload:', action.payload);
  console.log('Current State:', state);
  console.groupEnd();
  
  return action; // Continue with action
};

// Middleware for persistence
const persistenceMiddleware = (action, state, store) => {
  // Skip persistence for certain actions
  if (action.type === 'SET_LOADING') {
    return action;
  }

  // Save to localStorage after action completes
  setTimeout(() => {
    localStorage.setItem('todoState', JSON.stringify(store.getState()));
  }, 0);
  
  return action;
};

// Add middlewares
todoStore.use(loggerMiddleware);
todoStore.use(persistenceMiddleware);

// Subscribe to changes
todoStore.subscribe((newState, prevState, action) => {
  renderTodoApp(newState);
});

// Dispatch actions
todoStore.dispatch({
  type: 'ADD_TODO',
  payload: { text: 'Learn vanilla state management' }
});

todoStore.dispatch({
  type: 'ADD_TODO',
  payload: { text: 'Build awesome apps' }
});

todoStore.dispatch({
  type: 'TOGGLE_TODO',
  payload: { id: todoStore.getState().todos[0].id }
});

Async State Management

Handling Async Operations

// Async state manager with request handling
class AsyncState extends ActionState {
  constructor(initialState = {}, reducers = {}) {
    super(initialState, reducers);
    this._pendingRequests = new Map();
  }

  // Async action creator
  createAsyncAction(type, asyncFn) {
    return async (payload) => {
      const requestId = Date.now() + Math.random();
      
      // Dispatch loading state
      await this.dispatch({
        type: `${type}_LOADING`,
        payload: { requestId, loading: true }
      });

      try {
        // Store pending request for cancellation
        const abortController = new AbortController();
        this._pendingRequests.set(requestId, abortController);

        // Execute async function
        const result = await asyncFn(payload, {
          signal: abortController.signal,
          dispatch: this.dispatch.bind(this),
          getState: this.getState.bind(this)
        });

        // Dispatch success
        await this.dispatch({
          type: `${type}_SUCCESS`,
          payload: { requestId, data: result }
        });

        return result;
      } catch (error) {
        if (error.name === 'AbortError') {
          await this.dispatch({
            type: `${type}_CANCELLED`,
            payload: { requestId }
          });
        } else {
          await this.dispatch({
            type: `${type}_ERROR`,
            payload: { requestId, error: error.message }
          });
        }
        
        throw error;
      } finally {
        this._pendingRequests.delete(requestId);
      }
    };
  }

  // Cancel specific request
  cancelRequest(requestId) {
    const controller = this._pendingRequests.get(requestId);
    if (controller) {
      controller.abort();
      this._pendingRequests.delete(requestId);
    }
  }

  // Cancel all pending requests
  cancelAllRequests() {
    this._pendingRequests.forEach(controller => controller.abort());
    this._pendingRequests.clear();
  }
}

// API state management example
const apiReducers = {
  FETCH_USERS_LOADING: (state, { requestId, loading }) => ({
    ...state,
    users: {
      ...state.users,
      loading,
      error: null
    }
  }),

  FETCH_USERS_SUCCESS: (state, { data }) => ({
    ...state,
    users: {
      data,
      loading: false,
      error: null,
      lastFetched: new Date().toISOString()
    }
  }),

  FETCH_USERS_ERROR: (state, { error }) => ({
    ...state,
    users: {
      ...state.users,
      loading: false,
      error
    }
  }),

  FETCH_USER_PROFILE_SUCCESS: (state, { data }) => ({
    ...state,
    currentUser: data,
    userProfile: {
      ...state.userProfile,
      loading: false,
      error: null
    }
  })
};

const apiStore = new AsyncState(
  {
    users: {
      data: [],
      loading: false,
      error: null,
      lastFetched: null
    },
    currentUser: null,
    userProfile: {
      loading: false,
      error: null
    }
  },
  apiReducers
);

// Create async actions
const fetchUsers = apiStore.createAsyncAction('FETCH_USERS', async (params, { signal }) => {
  const response = await fetch('/api/users?' + new URLSearchParams(params), { signal });
  
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
  }
  
  return response.json();
});

const fetchUserProfile = apiStore.createAsyncAction('FETCH_USER_PROFILE', async (userId, { signal, dispatch, getState }) => {
  // Check cache first
  const currentState = getState();
  if (currentState.currentUser?.id === userId) {
    return currentState.currentUser;
  }

  const response = await fetch(`/api/users/${userId}`, { signal });
  return response.json();
});

// Usage
async function loadUserData() {
  try {
    await fetchUsers({ page: 1, limit: 10 });
    const users = apiStore.getState().users.data;
    
    if (users.length > 0) {
      await fetchUserProfile(users[0].id);
    }
  } catch (error) {
    console.error('Failed to load user data:', error);
  }
}

Nested State Management

Complex State Structures

// Deep state manager with path-based updates
class DeepState {
  constructor(initialState = {}) {
    this._state = this._deepClone(initialState);
    this._subscribers = new Set();
    this._pathSubscribers = new Map();
  }

  _deepClone(obj) {
    if (obj === null || typeof obj !== 'object') return obj;
    if (obj instanceof Date) return new Date(obj);
    if (obj instanceof Array) return obj.map(item => this._deepClone(item));
    
    const cloned = {};
    Object.keys(obj).forEach(key => {
      cloned[key] = this._deepClone(obj[key]);
    });
    return cloned;
  }

  _getByPath(obj, path) {
    return path.split('.').reduce((current, key) => {
      return current && current[key] !== undefined ? current[key] : undefined;
    }, obj);
  }

  _setByPath(obj, path, value) {
    const keys = path.split('.');
    const lastKey = keys.pop();
    
    const target = keys.reduce((current, key) => {
      if (!current[key] || typeof current[key] !== 'object') {
        current[key] = {};
      }
      return current[key];
    }, obj);
    
    target[lastKey] = value;
  }

  // Subscribe to specific path changes
  subscribeToPath(path, callback) {
    if (!this._pathSubscribers.has(path)) {
      this._pathSubscribers.set(path, new Set());
    }
    
    this._pathSubscribers.get(path).add(callback);
    
    return () => {
      const subscribers = this._pathSubscribers.get(path);
      if (subscribers) {
        subscribers.delete(callback);
        if (subscribers.size === 0) {
          this._pathSubscribers.delete(path);
        }
      }
    };
  }

  // Get value at path
  get(path = '') {
    if (!path) return this._deepClone(this._state);
    return this._deepClone(this._getByPath(this._state, path));
  }

  // Set value at path
  set(path, value) {
    const prevState = this._deepClone(this._state);
    const prevValue = this._getByPath(this._state, path);
    
    this._setByPath(this._state, path, value);
    
    // Notify path subscribers
    const pathSubscribers = this._pathSubscribers.get(path);
    if (pathSubscribers) {
      pathSubscribers.forEach(callback => {
        callback(this._deepClone(value), this._deepClone(prevValue), path);
      });
    }
    
    // Notify general subscribers
    this._subscribers.forEach(callback => {
      callback(this._deepClone(this._state), prevState);
    });
  }

  // Update multiple paths at once
  update(updates) {
    const prevState = this._deepClone(this._state);
    const changedPaths = [];
    
    Object.entries(updates).forEach(([path, value]) => {
      this._setByPath(this._state, path, value);
      changedPaths.push(path);
    });
    
    // Notify path subscribers for changed paths
    changedPaths.forEach(path => {
      const pathSubscribers = this._pathSubscribers.get(path);
      if (pathSubscribers) {
        const currentValue = this._getByPath(this._state, path);
        const prevValue = this._getByPath(prevState, path);
        
        pathSubscribers.forEach(callback => {
          callback(
            this._deepClone(currentValue), 
            this._deepClone(prevValue), 
            path
          );
        });
      }
    });
    
    // Notify general subscribers
    this._subscribers.forEach(callback => {
      callback(this._deepClone(this._state), prevState);
    });
  }

  // Subscribe to all changes
  subscribe(callback) {
    this._subscribers.add(callback);
    return () => this._subscribers.delete(callback);
  }

  // Array helpers
  push(path, item) {
    const array = this.get(path) || [];
    this.set(path, [...array, item]);
  }

  remove(path, predicate) {
    const array = this.get(path) || [];
    const filtered = array.filter(item => !predicate(item));
    this.set(path, filtered);
  }

  // Object helpers
  merge(path, updates) {
    const current = this.get(path) || {};
    this.set(path, { ...current, ...updates });
  }
}

// Complex app state example
const appStore = new DeepState({
  ui: {
    modals: {
      login: { open: false, data: null },
      confirmation: { open: false, data: null }
    },
    navigation: {
      currentPage: 'home',
      breadcrumbs: []
    },
    theme: {
      mode: 'light',
      primaryColor: '#007bff'
    }
  },
  user: {
    profile: null,
    preferences: {
      notifications: true,
      theme: 'auto'
    },
    permissions: []
  },
  data: {
    posts: [],
    comments: {},
    categories: []
  }
});

// Subscribe to specific UI changes
appStore.subscribeToPath('ui.modals.login', (newValue, prevValue) => {
  if (newValue.open && !prevValue.open) {
    console.log('Login modal opened');
    document.body.classList.add('modal-open');
  } else if (!newValue.open && prevValue.open) {
    console.log('Login modal closed');
    document.body.classList.remove('modal-open');
  }
});

// Subscribe to theme changes
appStore.subscribeToPath('ui.theme.mode', (newMode, prevMode) => {
  document.documentElement.setAttribute('data-theme', newMode);
});

// Usage examples
appStore.set('ui.modals.login.open', true);
appStore.merge('user.profile', { 
  name: 'John Doe', 
  email: 'john@example.com' 
});

appStore.push('data.posts', {
  id: 1,
  title: 'First Post',
  content: 'Hello World!'
});

// Batch updates
appStore.update({
  'ui.navigation.currentPage': 'profile',
  'ui.navigation.breadcrumbs': ['Home', 'Profile'],
  'user.preferences.notifications': false
});

Performance Optimization

Efficient State Updates

// Optimized state manager with batching and memoization
class OptimizedState {
  constructor(initialState = {}) {
    this._state = initialState;
    this._subscribers = new Set();
    this._updateQueue = [];
    this._isUpdating = false;
    this._memo = new WeakMap();
  }

  // Batch multiple updates
  batch(updateFn) {
    this._isUpdating = true;
    const prevState = { ...this._state };
    
    try {
      updateFn({
        set: (updates) => {
          this._updateQueue.push(updates);
        }
      });

      // Apply all queued updates
      if (this._updateQueue.length > 0) {
        const mergedUpdates = this._updateQueue.reduce((acc, updates) => {
          return { ...acc, ...updates };
        }, {});
        
        this._state = { ...this._state, ...mergedUpdates };
        this._updateQueue = [];
        
        // Notify subscribers once
        this._subscribers.forEach(callback => {
          callback(this._state, prevState);
        });
      }
    } finally {
      this._isUpdating = false;
    }
  }

  // Memoized selector
  createSelector(selectorFn, dependencies = []) {
    return () => {
      const cacheKey = JSON.stringify([
        selectorFn.toString(),
        ...dependencies.map(dep => this._state[dep])
      ]);
      
      if (this._memo.has(selectorFn) && this._memo.get(selectorFn).key === cacheKey) {
        return this._memo.get(selectorFn).value;
      }
      
      const result = selectorFn(this._state);
      this._memo.set(selectorFn, { key: cacheKey, value: result });
      
      return result;
    };
  }

  // Debounced state updates
  createDebouncedUpdater(delay = 300) {
    let timeoutId;
    
    return (updates) => {
      clearTimeout(timeoutId);
      
      timeoutId = setTimeout(() => {
        this.setState(updates);
      }, delay);
    };
  }

  setState(updates) {
    if (this._isUpdating) {
      this._updateQueue.push(updates);
      return;
    }

    const prevState = { ...this._state };
    this._state = { ...this._state, ...updates };
    
    // Clear memoization cache
    this._memo = new WeakMap();
    
    this._subscribers.forEach(callback => {
      callback(this._state, prevState);
    });
  }

  getState() {
    return this._state;
  }

  subscribe(callback) {
    this._subscribers.add(callback);
    return () => this._subscribers.delete(callback);
  }
}

// Usage example
const optimizedStore = new OptimizedState({
  users: [],
  posts: [],
  comments: [],
  filters: {
    searchTerm: '',
    category: 'all',
    sortBy: 'date'
  }
});

// Create memoized selectors
const selectFilteredPosts = optimizedStore.createSelector(
  (state) => {
    return state.posts.filter(post => {
      if (state.filters.category !== 'all' && post.category !== state.filters.category) {
        return false;
      }
      
      if (state.filters.searchTerm) {
        return post.title.toLowerCase().includes(state.filters.searchTerm.toLowerCase());
      }
      
      return true;
    }).sort((a, b) => {
      if (state.filters.sortBy === 'date') {
        return new Date(b.createdAt) - new Date(a.createdAt);
      }
      return a.title.localeCompare(b.title);
    });
  },
  ['posts', 'filters'] // Dependencies
);

// Create debounced search updater
const updateSearch = optimizedStore.createDebouncedUpdater(300);

// Batch multiple updates
optimizedStore.batch(({ set }) => {
  set({ 'filters.category': 'tech' });
  set({ 'filters.sortBy': 'title' });
});

// Usage in search input
document.getElementById('search').addEventListener('input', (e) => {
  updateSearch({ 'filters.searchTerm': e.target.value });
});