State Management

Learn about different state management approaches and best practices for frontend applications

Introduction to State Management

State management is one of the most critical aspects of frontend development. It refers to how an application maintains, updates, and shares data across components. Effective state management ensures that your application remains predictable, maintainable, and performant as it grows in complexity.

What is State?

State represents the data that can change over time in your application. This includes user inputs, server responses, UI control states, authentication status, and more.

Why is it Important?

As applications grow, managing state becomes increasingly complex. Without proper state management, applications can become unpredictable, difficult to debug, and prone to bugs.

Types of State

Applications typically have different types of state: UI state, application state, server state, URL state, and form state, each with different characteristics and management needs.

State Management Challenges

Common challenges include state synchronization, handling asynchronous operations, preventing unnecessary re-renders, and maintaining a single source of truth.

Types of State

Before diving into specific state management solutions, it’s important to understand the different types of state in a frontend application:

Local Component State

State that is specific to a single component and doesn’t need to be shared with other parts of the application.

// React example using useState hook
function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Application State

State that is shared across multiple components or the entire application, such as user authentication status, theme preferences, or global settings.

Server State

Data fetched from an API or server that needs to be cached, synchronized, and updated in your frontend application.

// React example using a custom hook for server state
function UserProfile({ userId }) {
  const { data, loading, error } = useUser(userId);
  
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  
  return (
    <div>
      <h2>{data.name}</h2>
      <p>Email: {data.email}</p>
    </div>
  );
}

URL State

State that is stored in the URL, such as search parameters, filters, or the current page in pagination.

// React Router example
function SearchResults() {
  const [searchParams] = useSearchParams();
  const query = searchParams.get('q') || '';
  const page = parseInt(searchParams.get('page') || '1');
  
  // Use query and page to fetch and display results
}

Form State

State related to form inputs, validation, submission status, and errors.

// React example with form state
function ContactForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);
  
  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };
  
  const handleSubmit = async (e) => {
    e.preventDefault();
    // Validation and submission logic
  };
  
  return (
    <form onSubmit={handleSubmit}>
      {/* Form fields */}
    </form>
  );
}

State Management Approaches

There are several approaches to managing state in frontend applications, each with its own strengths and use cases.

Component-Based State Management

This approach keeps state within components and passes data down through props. It’s suitable for simpler applications or components with isolated state.

React’s Built-in State Management

// Parent component with state
function ParentComponent() {
  const [user, setUser] = useState(null);
  
  const login = (userData) => {
    setUser(userData);
  };
  
  const logout = () => {
    setUser(null);
  };
  
  return (
    <div>
      <Header user={user} onLogout={logout} />
      <Main user={user} />
      {!user && <LoginForm onLogin={login} />}
    </div>
  );
}

Component Composition

Using component composition to avoid prop drilling (passing props through multiple levels of components).

// Using React's children prop for composition
function Page({ user }) {
  return (
    <div className="page">
      <Sidebar>
        <UserInfo user={user} />
        <Navigation />
      </Sidebar>
      <Content>
        <UserPosts user={user} />
      </Content>
    </div>
  );
}

Context API

Context provides a way to share state between components without explicitly passing props through every level of the component tree.

// Creating a context
const ThemeContext = createContext();

// Provider component
function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  
  const toggleTheme = () => {
    setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
  };
  
  const value = {
    theme,
    toggleTheme
  };
  
  return (
    <ThemeContext.Provider value={value}>
      {children}
    </ThemeContext.Provider>
  );
}

// Custom hook for consuming the context
function useTheme() {
  const context = useContext(ThemeContext);
  if (context === undefined) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
}

// Using the context in a component
function ThemedButton() {
  const { theme, toggleTheme } = useTheme();
  
  return (
    <button 
      className={`btn-${theme}`}
      onClick={toggleTheme}
    >
      Toggle Theme
    </button>
  );
}

// Wrapping the app with the provider
function App() {
  return (
    <ThemeProvider>
      <Header />
      <Main />
      <Footer />
    </ThemeProvider>
  );
}

Context is great for global state that doesn’t change frequently, like themes, user authentication, or language preferences. For state that changes frequently, consider using a more optimized solution like Redux or Zustand.

Flux Architecture and Redux

The Flux architecture, popularized by Redux, uses a unidirectional data flow pattern with actions, reducers, and a single store.

// Redux store setup
import { createStore } from 'redux';

// Action types
const ADD_TODO = 'ADD_TODO';
const TOGGLE_TODO = 'TOGGLE_TODO';

// Action creators
function addTodo(text) {
  return { type: ADD_TODO, text };
}

function toggleTodo(id) {
  return { type: TOGGLE_TODO, id };
}

// Reducer
function todoReducer(state = [], action) {
  switch (action.type) {
    case ADD_TODO:
      return [
        ...state,
        {
          id: Date.now(),
          text: action.text,
          completed: false
        }
      ];
    case TOGGLE_TODO:
      return state.map(todo =>
        todo.id === action.id
          ? { ...todo, completed: !todo.completed }
          : todo
      );
    default:
      return state;
  }
}

// Create store
const store = createStore(todoReducer);

// Dispatching actions
store.dispatch(addTodo('Learn Redux'));
store.dispatch(toggleTodo(1));

Modern Redux with Redux Toolkit

Redux Toolkit simplifies Redux code by providing utilities to reduce boilerplate.

import { createSlice, configureStore } from '@reduxjs/toolkit';

// Create a slice
const todosSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo: (state, action) => {
      state.push({
        id: Date.now(),
        text: action.payload,
        completed: false
      });
    },
    toggleTodo: (state, action) => {
      const todo = state.find(todo => todo.id === action.payload);
      if (todo) {
        todo.completed = !todo.completed;
      }
    }
  }
});

// Extract action creators and reducer
export const { addTodo, toggleTodo } = todosSlice.actions;
export const todosReducer = todosSlice.reducer;

// Create store
const store = configureStore({
  reducer: {
    todos: todosReducer
  }
});

// Using with React
import { Provider, useSelector, useDispatch } from 'react-redux';

function TodoApp() {
  return (
    <Provider store={store}>
      <TodoList />
      <AddTodoForm />
    </Provider>
  );
}

function TodoList() {
  const todos = useSelector(state => state.todos);
  const dispatch = useDispatch();
  
  return (
    <ul>
      {todos.map(todo => (
        <li
          key={todo.id}
          style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
          onClick={() => dispatch(toggleTodo(todo.id))}
        >
          {todo.text}
        </li>
      ))}
    </ul>
  );
}

State Machines with XState

State machines provide a formal way to define the possible states of your application and the transitions between them.

import { createMachine, interpret } from 'xstate';
import { useMachine } from '@xstate/react';

// Define the state machine
const trafficLightMachine = createMachine({
  id: 'trafficLight',
  initial: 'red',
  states: {
    green: {
      on: { TIMER: 'yellow' },
      after: {
        5000: { target: 'yellow' }
      }
    },
    yellow: {
      on: { TIMER: 'red' },
      after: {
        2000: { target: 'red' }
      }
    },
    red: {
      on: { TIMER: 'green' },
      after: {
        7000: { target: 'green' }
      }
    }
  }
});

// React component using the state machine
function TrafficLight() {
  const [state, send] = useMachine(trafficLightMachine);
  
  return (
    <div className="traffic-light">
      <div 
        className={`light red ${state.matches('red') ? 'active' : ''}`}
        onClick={() => send('TIMER')}
      />
      <div 
        className={`light yellow ${state.matches('yellow') ? 'active' : ''}`}
        onClick={() => send('TIMER')}
      />
      <div 
        className={`light green ${state.matches('green') ? 'active' : ''}`}
        onClick={() => send('TIMER')}
      />
    </div>
  );
}

Atomic State Management with Recoil or Jotai

Atomic state management libraries like Recoil and Jotai allow you to create small, reusable pieces of state called atoms.

Recoil Example

import { atom, selector, useRecoilState, useRecoilValue } from 'recoil';

// Define atoms
const todoListState = atom({
  key: 'todoListState',
  default: []
});

const todoListFilterState = atom({
  key: 'todoListFilterState',
  default: 'Show All'
});

// Define selectors
const filteredTodoListState = selector({
  key: 'filteredTodoListState',
  get: ({ get }) => {
    const filter = get(todoListFilterState);
    const list = get(todoListState);

    switch (filter) {
      case 'Show Completed':
        return list.filter((item) => item.isComplete);
      case 'Show Uncompleted':
        return list.filter((item) => !item.isComplete);
      default:
        return list;
    }
  }
});

// Components
function TodoList() {
  const todoList = useRecoilValue(filteredTodoListState);

  return (
    <>
      <TodoListStats />
      <TodoListFilters />
      <TodoItemCreator />

      {todoList.map((todoItem) => (
        <TodoItem key={todoItem.id} item={todoItem} />
      ))}
    </>
  );
}

function TodoListFilters() {
  const [filter, setFilter] = useRecoilState(todoListFilterState);

  const updateFilter = ({ target: { value } }) => {
    setFilter(value);
  };

  return (
    <>
      Filter:
      <select value={filter} onChange={updateFilter}>
        <option value="Show All">All</option>
        <option value="Show Completed">Completed</option>
        <option value="Show Uncompleted">Uncompleted</option>
      </select>
    </>
  );
}

Jotai Example

import { atom, useAtom } from 'jotai';

// Define atoms
const countAtom = atom(0);
const doubleCountAtom = atom((get) => get(countAtom) * 2);

// Component using atoms
function Counter() {
  const [count, setCount] = useAtom(countAtom);
  const [doubleCount] = useAtom(doubleCountAtom);

  return (
    <div>
      <h1>Count: {count}</h1>
      <h2>Double: {doubleCount}</h2>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
    </div>
  );
}

Zustand

Zustand is a small, fast, and scalable state management solution with a simple API.

import create from 'zustand';

// Create a store
const useStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
  updateBears: (newBears) => set({ bears: newBears })
}));

// Component using the store
function BearCounter() {
  const bears = useStore((state) => state.bears);
  const increasePopulation = useStore((state) => state.increasePopulation);
  
  return (
    <div>
      <h1>{bears} bears around here...</h1>
      <button onClick={increasePopulation}>Add a bear</button>
    </div>
  );
}

Server State Management

Libraries like React Query, SWR, and Apollo Client specialize in managing server state, handling caching, background updates, and synchronization.

React Query Example

import { QueryClient, QueryClientProvider, useQuery, useMutation } from 'react-query';

// Create a client
const queryClient = new QueryClient();

// API functions
const fetchTodos = async () => {
  const response = await fetch('/api/todos');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

const addTodo = async (newTodo) => {
  const response = await fetch('/api/todos', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(newTodo),
  });
  return response.json();
};

// Components
function Todos() {
  // Query
  const { data, isLoading, error } = useQuery('todos', fetchTodos);
  
  // Mutation
  const mutation = useMutation(addTodo, {
    onSuccess: () => {
      // Invalidate and refetch
      queryClient.invalidateQueries('todos');
    },
  });
  
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  
  return (
    <div>
      <ul>
        {data.map(todo => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>
      
      <form
        onSubmit={(e) => {
          e.preventDefault();
          mutation.mutate({ title: e.target.elements.title.value });
          e.target.reset();
        }}
      >
        <input name="title" />
        <button type="submit">Add Todo</button>
      </form>
    </div>
  );
}

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Todos />
    </QueryClientProvider>
  );
}

SWR Example

import useSWR, { mutate } from 'swr';

// Fetcher function
const fetcher = async (url) => {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

function Profile() {
  const { data, error, isLoading } = useSWR('/api/user', fetcher);
  
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  
  return (
    <div>
      <h1>Hello {data.name}!</h1>
      <button
        onClick={async () => {
          // Update local data immediately
          mutate('/api/user', { ...data, name: 'New Name' }, false);
          
          // Send request to update data
          await fetch('/api/user', {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ name: 'New Name' }),
          });
          
          // Trigger revalidation
          mutate('/api/user');
        }}
      >
        Update Name
      </button>
    </div>
  );
}

State Management Patterns and Best Practices

Choosing the Right Solution

Selecting the appropriate state management solution depends on your application’s needs:

Small Applications

For small applications or prototypes, local component state or Context API is often sufficient.

Medium Applications

As applications grow, consider Zustand, Jotai, or Redux Toolkit for global state, and React Query or SWR for server state.

Large Applications

Complex applications may benefit from a combination of solutions: Redux for global state, React Query for server state, and XState for complex workflows.

Specific Requirements

Consider specific needs like offline support (Redux + IndexedDB), real-time updates (WebSockets + state management), or complex state transitions (XState).

State Normalization

Normalize state to avoid duplication and make updates more efficient, especially for relational data.

// Normalized state example
const normalizedState = {
  users: {
    byId: {
      'user1': { id: 'user1', name: 'John', postIds: ['post1', 'post2'] },
      'user2': { id: 'user2', name: 'Jane', postIds: ['post3'] }
    },
    allIds: ['user1', 'user2']
  },
  posts: {
    byId: {
      'post1': { id: 'post1', title: 'First Post', authorId: 'user1' },
      'post2': { id: 'post2', title: 'Second Post', authorId: 'user1' },
      'post3': { id: 'post3', title: 'Another Post', authorId: 'user2' }
    },
    allIds: ['post1', 'post2', 'post3']
  }
};

// Accessing data
function getUserPosts(state, userId) {
  const user = state.users.byId[userId];
  if (!user) return [];
  
  return user.postIds.map(postId => state.posts.byId[postId]);
}

Immutability

Maintain immutability when updating state to ensure predictable behavior and enable optimizations like memoization.

// Bad: Mutating state directly
function addTodo(state, text) {
  state.todos.push({ id: Date.now(), text, completed: false }); // Mutation!
  return state;
}

// Good: Creating new objects
function addTodo(state, text) {
  return {
    ...state,
    todos: [
      ...state.todos,
      { id: Date.now(), text, completed: false }
    ]
  };
}

// Using immer for easier immutable updates
import produce from 'immer';

function addTodo(state, text) {
  return produce(state, draft => {
    draft.todos.push({ id: Date.now(), text, completed: false });
  });
}

State Selectors

Use selectors to derive data from state, improving performance and maintainability.

// Redux selectors example
const selectTodos = state => state.todos;

const selectCompletedTodos = state => {
  return state.todos.filter(todo => todo.completed);
};

const selectTodoById = (state, id) => {
  return state.todos.find(todo => todo.id === id);
};

// Using with memoization
import { createSelector } from 'reselect';

const selectVisibleTodos = createSelector(
  [selectTodos, state => state.visibilityFilter],
  (todos, filter) => {
    switch (filter) {
      case 'SHOW_COMPLETED':
        return todos.filter(todo => todo.completed);
      case 'SHOW_ACTIVE':
        return todos.filter(todo => !todo.completed);
      default:
        return todos;
    }
  }
);

Optimizing Re-renders

Prevent unnecessary re-renders by using memoization techniques and optimizing component structure.

// Using React.memo to prevent re-renders
const TodoItem = React.memo(function TodoItem({ todo, onToggle }) {
  console.log(`Rendering TodoItem: ${todo.text}`);
  
  return (
    <li
      style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
      onClick={() => onToggle(todo.id)}
    >
      {todo.text}
    </li>
  );
});

// Using useMemo for expensive calculations
function TodoStats({ todos }) {
  const stats = useMemo(() => {
    console.log('Calculating stats...');
    const total = todos.length;
    const completed = todos.filter(todo => todo.completed).length;
    const incomplete = total - completed;
    const percentComplete = total === 0 ? 0 : (completed / total) * 100;
    
    return { total, completed, incomplete, percentComplete };
  }, [todos]);
  
  return (
    <div>
      <p>Total: {stats.total}</p>
      <p>Completed: {stats.completed}</p>
      <p>Incomplete: {stats.incomplete}</p>
      <p>Percent Complete: {stats.percentComplete.toFixed(0)}%</p>
    </div>
  );
}

// Using useCallback for stable callbacks
function TodoList() {
  const [todos, setTodos] = useState([]);
  
  const handleToggle = useCallback((id) => {
    setTodos(prevTodos =>
      prevTodos.map(todo =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  }, []);
  
  return (
    <ul>
      {todos.map(todo => (
        <TodoItem 
          key={todo.id} 
          todo={todo} 
          onToggle={handleToggle} 
        />
      ))}
    </ul>
  );
}

Managing Asynchronous State

Handle loading, success, and error states consistently for asynchronous operations.

// Simple async state pattern
function UserProfile({ userId }) {
  const [state, setState] = useState({
    status: 'idle', // 'idle' | 'loading' | 'success' | 'error'
    data: null,
    error: null
  });
  
  useEffect(() => {
    if (!userId) return;
    
    setState({ status: 'loading', data: null, error: null });
    
    fetchUser(userId)
      .then(data => {
        setState({ status: 'success', data, error: null });
      })
      .catch(error => {
        setState({ status: 'error', data: null, error });
      });
  }, [userId]);
  
  // Render based on state
  if (state.status === 'idle') {
    return <p>Please select a user</p>;
  }
  
  if (state.status === 'loading') {
    return <p>Loading user data...</p>;
  }
  
  if (state.status === 'error') {
    return <p>Error: {state.error.message}</p>;
  }
  
  return (
    <div>
      <h2>{state.data.name}</h2>
      <p>Email: {state.data.email}</p>
    </div>
  );
}

// Using a custom hook for reusability
function useAsync(asyncFunction, immediate = true) {
  const [status, setStatus] = useState('idle');
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  
  const execute = useCallback(async (...params) => {
    setStatus('loading');
    setData(null);
    setError(null);
    
    try {
      const result = await asyncFunction(...params);
      setData(result);
      setStatus('success');
      return result;
    } catch (error) {
      setError(error);
      setStatus('error');
      throw error;
    }
  }, [asyncFunction]);
  
  useEffect(() => {
    if (immediate) {
      execute();
    }
  }, [execute, immediate]);
  
  return { execute, status, data, error };
}

State Persistence

Persist state across page reloads using localStorage, sessionStorage, or IndexedDB.

// Simple localStorage persistence with Redux
import { createStore } from 'redux';

// Load state from localStorage
function loadState() {
  try {
    const serializedState = localStorage.getItem('appState');
    if (serializedState === null) {
      return undefined; // Let reducer initialize state
    }
    return JSON.parse(serializedState);
  } catch (err) {
    console.error('Failed to load state:', err);
    return undefined;
  }
}

// Save state to localStorage
function saveState(state) {
  try {
    const serializedState = JSON.stringify(state);
    localStorage.setItem('appState', serializedState);
  } catch (err) {
    console.error('Failed to save state:', err);
  }
}

const persistedState = loadState();
const store = createStore(rootReducer, persistedState);

// Save state on changes (throttled to avoid performance issues)
store.subscribe(throttle(() => {
  saveState({
    // Only persist what's necessary
    user: store.getState().user,
    preferences: store.getState().preferences
  });
}, 1000));

// Using a custom hook for React state persistence
function usePersistedState(key, defaultValue) {
  const [state, setState] = useState(() => {
    try {
      const storedValue = localStorage.getItem(key);
      return storedValue !== null ? JSON.parse(storedValue) : defaultValue;
    } catch (error) {
      console.error('Error retrieving persisted state:', error);
      return defaultValue;
    }
  });
  
  useEffect(() => {
    try {
      localStorage.setItem(key, JSON.stringify(state));
    } catch (error) {
      console.error('Error storing persisted state:', error);
    }
  }, [key, state]);
  
  return [state, setState];
}

// Usage
function App() {
  const [theme, setTheme] = usePersistedState('theme', 'light');
  
  return (
    <div className={`app ${theme}`}>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Toggle Theme
      </button>
    </div>
  );
}

State Management in Different Frameworks

React

React offers several built-in options for state management, and the ecosystem provides many third-party solutions.

// useState for local state
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

// useReducer for more complex state logic
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

Vue.js

Vue provides reactive state management through its reactivity system and Vuex for centralized state management.

// Vue 3 Composition API
import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);
    
    function increment() {
      count.value++;
    }
    
    return {
      count,
      doubleCount,
      increment
    };
  }
};

// Vuex store
import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

// Using Pinia (modern alternative to Vuex)
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    increment() {
      this.count++;
    },
    async incrementAsync() {
      await new Promise(resolve => setTimeout(resolve, 1000));
      this.increment();
    }
  }
});

Angular

Angular uses services and RxJS for state management, with NgRx as a Redux-inspired solution for larger applications.

// Service-based state management
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CounterService {
  private countSubject = new BehaviorSubject<number>(0);
  count$ = this.countSubject.asObservable();
  
  increment() {
    this.countSubject.next(this.countSubject.value + 1);
  }
  
  decrement() {
    this.countSubject.next(this.countSubject.value - 1);
  }
  
  reset() {
    this.countSubject.next(0);
  }
}

// Component using the service
import { Component } from '@angular/core';
import { CounterService } from './counter.service';

@Component({
  selector: 'app-counter',
  template: `
    <div>
      <p>Count: {{ count$ | async }}</p>
      <button (click)="increment()">+</button>
      <button (click)="decrement()">-</button>
      <button (click)="reset()">Reset</button>
    </div>
  `
})
export class CounterComponent {
  count$ = this.counterService.count$;
  
  constructor(private counterService: CounterService) {}
  
  increment() {
    this.counterService.increment();
  }
  
  decrement() {
    this.counterService.decrement();
  }
  
  reset() {
    this.counterService.reset();
  }
}

// NgRx example
import { createAction, createReducer, on, props } from '@ngrx/store';

// Actions
export const increment = createAction('[Counter] Increment');
export const decrement = createAction('[Counter] Decrement');
export const reset = createAction('[Counter] Reset');

// Reducer
export const initialState = 0;

export const counterReducer = createReducer(
  initialState,
  on(increment, (state) => state + 1),
  on(decrement, (state) => state - 1),
  on(reset, () => 0)
);

Svelte

Svelte has built-in reactive state management with stores for shared state.

<!-- Component with local state -->
<script>
  let count = 0;
  
  function increment() {
    count += 1;
  }
</script>

<button on:click={increment}>
  Clicks: {count}
</button>

<!-- Using Svelte stores -->
<script>
  import { writable, derived } from 'svelte/store';
  
  // Create a writable store
  export const count = writable(0);
  
  // Create a derived store
  export const doubleCount = derived(count, $count => $count * 2);
  
  function increment() {
    count.update(n => n + 1);
  }
</script>

<!-- In another component -->
<script>
  import { count, doubleCount } from './stores';
</script>

<h1>Count: {$count}</h1>
<p>Double: {$doubleCount}</p>
<button on:click={() => $count++}>Increment</button>

Debugging State

Effective debugging tools and techniques are essential for managing state in complex applications.

Redux DevTools

Redux DevTools allows you to inspect state changes, time-travel debugging, and more for Redux-based applications.

// Setting up Redux DevTools
import { createStore, applyMiddleware, compose } from 'redux';
import rootReducer from './reducers';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(
  rootReducer,
  composeEnhancers(applyMiddleware(/* your middleware */))
);

// With Redux Toolkit
import { configureStore } from '@reduxjs/toolkit';

const store = configureStore({
  reducer: rootReducer,
  // DevTools are enabled by default in development
});

React DevTools

React DevTools provides a Components tab for inspecting component props and state, and a Profiler tab for performance analysis.

Logging State Changes

Implement logging to track state changes during development.

// Simple logging middleware for Redux
const logger = store => next => action => {
  console.group(action.type);
  console.log('Previous state:', store.getState());
  console.log('Action:', action);
  const result = next(action);
  console.log('Next state:', store.getState());
  console.groupEnd();
  return result;
};

// Custom hook for logging state changes
function useLogState(state, name = 'State') {
  useEffect(() => {
    console.log(`${name} changed:`, state);
  }, [state, name]);
}

// Usage
function Counter() {
  const [count, setCount] = useState(0);
  useLogState(count, 'Count');
  
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

Conclusion

Effective state management is crucial for building maintainable and performant frontend applications. By understanding the different types of state, choosing the right management approach, and following best practices, you can create applications that scale well and provide a great user experience.

Remember that there’s no one-size-fits-all solution for state management. The best approach depends on your application’s specific requirements, team preferences, and the trade-offs you’re willing to make between simplicity, performance, and features.

Resources

Official Documentation

• React State and Lifecycle
• Redux Documentation
• Redux Toolkit
• React Query
• XState Documentation
• Zustand GitHub
• Recoil Documentation
• Jotai Documentation

Articles and Tutorials

• State Management in React
• Redux Style Guide
• A Complete Guide to useEffect
• Thinking in React Query
• State Machines in JavaScript

Tools

• Redux DevTools Extension
• React DevTools
• Immer
• Reselect