Introduction to State Management

What is State Management?

State management is the practice of managing the data that controls how your application behaves and what it displays. In React, "state" refers to any data that can change over time and affects what's rendered on the screen.

As applications grow, managing state becomes increasingly complex. Data needs to be shared between components, synchronized with servers, and kept consistent across the UI. This is where state management solutions come in.

Local State with useState

import { useState } from 'react';

function Counter() {
  // Local state - only this component needs it
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

function Form() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  
  return (
    <form>
      <input 
        value={name} 
        onChange={(e) => setName(e.target.value)} 
        placeholder="Name"
      />
      <input 
        value={email} 
        onChange={(e) => setEmail(e.target.value)} 
        placeholder="Email"
      />
    </form>
  );
}

Complex State with useReducer

import { useReducer } from 'react';

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

function TodoList() {
  const [todos, dispatch] = useReducer(todoReducer, []);
  
  const addTodo = (text) => {
    dispatch({ type: 'ADD_TODO', text });
  };
  
  const toggleTodo = (id) => {
    dispatch({ type: 'TOGGLE_TODO', id });
  };
  
  return (
    <div>
      <button onClick={() => addTodo('New task')}>Add Todo</button>
      {todos.map(todo => (
        <div key={todo.id} onClick={() => toggleTodo(todo.id)}>
          {todo.done ? '✓' : '○'} {todo.text}
        </div>
      ))}
    </div>
  );
}

The Problem: Prop Drilling

// Without state management, data must be passed through every level
function App() {
  const [user, setUser] = useState(null);
  const [theme, setTheme] = useState('light');
  
  return (
    <Layout user={user} theme={theme}>
      <Header user={user} theme={theme} />
      <Main user={user} theme={theme}>
        <Sidebar user={user} theme={theme} />
        <Content user={user} theme={theme}>
          <UserProfile user={user} />  {/* Finally uses user! */}
        </Content>
      </Main>
    </Layout>
  );
}

// This is called "prop drilling" - passing props through
// many layers of components that don't use them

State Management Landscape