React State Management in 2025: What You Actually Need

import { useImmer } from 'use-immer';

// ❌ WITHOUT IMMER: Verbose and error-prone
function TodoListWithoutImmer() {
  const [todos, setTodos] = useState([
    { id: 1, text: 'Learn React', completed: false, tags: ['learning'] }
  ]);

  const toggleTodo = (id: number) => {
    setTodos(todos.map(todo => 
      todo.id === id 
        ? { ...todo, completed: !todo.completed }
        : todo
    ));
  };

  const addTag = (todoId: number, tag: string) => {
    setTodos(todos.map(todo => 
      todo.id === todoId
        ? { ...todo, tags: [...todo.tags, tag] } // Nested spread!
        : todo
    ));
  };

  return (
    <div>
      {todos.map(todo => (
        <div key={todo.id}>
          <input 
            type="checkbox" 
            checked={todo.completed}
            onChange={() => toggleTodo(todo.id)}
          />
          {todo.text}
        </div>
      ))}
    </div>
  );
}

// ✅ WITH IMMER: Clean and intuitive
function TodoListWithImmer() {
  const [todos, setTodos] = useImmer([
    { id: 1, text: 'Learn React', completed: false, tags: ['learning'] }
  ]);

  const toggleTodo = (id: number) => {
    setTodos(draft => {
      const todo = draft.find(t => t.id === id);
      if (todo) {
        todo.completed = !todo.completed; // Looks like mutation, but it's safe!
      }
    });
  };

  const addTag = (todoId: number, tag: string) => {
    setTodos(draft => {
      const todo = draft.find(t => t.id === todoId);
      if (todo) {
        todo.tags.push(tag); // Direct push! No spread needed.
      }
    });
  };

  return (
    <div>
      {todos.map(todo => (
        <div key={todo.id}>
          <input 
            type="checkbox" 
            checked={todo.completed}
            onChange={() => toggleTodo(todo.id)}
          />
          {todo.text}
        </div>
      ))}
    </div>
  );
}

// Advanced: Complex nested updates
function ComplexStateExample() {
  const [state, setState] = useImmer({
    user: {
      profile: {
        name: 'John',
        settings: {
          theme: 'dark',
          notifications: {
            email: true,
            push: false
          }
        }
      },
      posts: [
        { id: 1, title: 'Post 1', comments: [] }
      ]
    }
  });

  // Update deeply nested property - one line!
  const toggleEmailNotifications = () => {
    setState(draft => {
      draft.user.profile.settings.notifications.email = 
        !draft.user.profile.settings.notifications.email;
    });
  };

  // Add comment to post - direct array manipulation!
  const addComment = (postId: number, comment: string) => {
    setState(draft => {
      const post = draft.user.posts.find(p => p.id === postId);
      if (post) {
        post.comments.push({ id: Date.now(), text: comment });
      }
    });
  };

  return (
    <div>
      <button onClick={toggleEmailNotifications}>
        Toggle Email Notifications
      </button>
      {/* ... */}
    </div>
  );
}

import { useImmerReducer } from 'use-immer';

// ❌ WITHOUT IMMER: Verbose reducer
type State = {
  items: Array<{ id: number; name: string; completed: boolean }>;
  filter: 'all' | 'active' | 'completed';
};

type Action =
  | { type: 'ADD_ITEM'; payload: string }
  | { type: 'TOGGLE_ITEM'; payload: number }
  | { type: 'DELETE_ITEM'; payload: number }
  | { type: 'SET_FILTER'; payload: 'all' | 'active' | 'completed' };

function reducerWithoutImmer(state: State, action: Action): State {
  switch (action.type) {
    case 'ADD_ITEM':
      return {
        ...state,
        items: [...state.items, { 
          id: Date.now(), 
          name: action.payload, 
          completed: false 
        }]
      };
    case 'TOGGLE_ITEM':
      return {
        ...state,
        items: state.items.map(item =>
          item.id === action.payload
            ? { ...item, completed: !item.completed }
            : item
        )
      };
    case 'DELETE_ITEM':
      return {
        ...state,
        items: state.items.filter(item => item.id !== action.payload)
      };
    case 'SET_FILTER':
      return { ...state, filter: action.payload };
    default:
      return state;
  }
}

// ✅ WITH IMMER: Clean and readable
function reducerWithImmer(draft: State, action: Action) {
  switch (action.type) {
    case 'ADD_ITEM':
      draft.items.push({
        id: Date.now(),
        name: action.payload,
        completed: false
      });
      break;
    case 'TOGGLE_ITEM':
      const item = draft.items.find(i => i.id === action.payload);
      if (item) {
        item.completed = !item.completed;
      }
      break;
    case 'DELETE_ITEM':
      draft.items = draft.items.filter(i => i.id !== action.payload);
      break;
    case 'SET_FILTER':
      draft.filter = action.payload;
      break;
  }
}

function TodoApp() {
  const [state, dispatch] = useImmerReducer(reducerWithImmer, {
    items: [],
    filter: 'all'
  });

  const filteredItems = state.items.filter(item => {
    if (state.filter === 'active') return !item.completed;
    if (state.filter === 'completed') return item.completed;
    return true;
  });

  return (
    <div>
      <input
        onKeyDown={(e) => {
          if (e.key === 'Enter') {
            dispatch({ type: 'ADD_ITEM', payload: e.currentTarget.value });
            e.currentTarget.value = '';
          }
        }}
        placeholder="Add todo..."
      />
      <div>
        <button onClick={() => dispatch({ type: 'SET_FILTER', payload: 'all' })}>
          All
        </button>
        <button onClick={() => dispatch({ type: 'SET_FILTER', payload: 'active' })}>
          Active
        </button>
        <button onClick={() => dispatch({ type: 'SET_FILTER', payload: 'completed' })}>
          Completed
        </button>
      </div>
      <ul>
        {filteredItems.map(item => (
          <li key={item.id}>
            <input
              type="checkbox"
              checked={item.completed}
              onChange={() => dispatch({ type: 'TOGGLE_ITEM', payload: item.id })}
            />
            {item.name}
            <button onClick={() => dispatch({ type: 'DELETE_ITEM', payload: item.id })}>
              Delete
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

// Simple data fetching with automatic caching
function UserProfile({ userId }: { userId: string }) {
  const { data, isLoading, error } = useQuery({
    queryKey: ['user', userId],
    queryFn: async () => {
      const res = await fetch(`/api/users/${userId}`);
      if (!res.ok) throw new Error('Failed to fetch');
      return res.json();
    },
    staleTime: 1000 * 60 * 5, // Consider data fresh for 5 minutes
  });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return <div>{data.name}</div>;
}

// Use the same query in another component - no duplicate request!
function UserAvatar({ userId }: { userId: string }) {
  const { data } = useQuery({
    queryKey: ['user', userId], // Same key = same cache
    queryFn: async () => {
      const res = await fetch(`/api/users/${userId}`);
      return res.json();
    },
  });

  return <img src={data?.avatar} alt={data?.name} />;
}

// Mutations with optimistic updates
function LikeButton({ postId }: { postId: string }) {
  const queryClient = useQueryClient();

  const mutation = useMutation({
    mutationFn: async () => {
      const res = await fetch(`/api/posts/${postId}/like`, { method: 'POST' });
      return res.json();
    },
    onMutate: async () => {
      // Cancel outgoing refetches
      await queryClient.cancelQueries({ queryKey: ['post', postId] });
      
      // Snapshot previous value
      const previous = queryClient.getQueryData(['post', postId]);
      
      // Optimistically update
      queryClient.setQueryData(['post', postId], (old: any) => ({
        ...old,
        likes: old.likes + 1,
        isLiked: true
      }));
      
      return { previous };
    },
    onError: (err, variables, context) => {
      // Rollback on error
      queryClient.setQueryData(['post', postId], context?.previous);
    },
    onSettled: () => {
      // Refetch to ensure sync
      queryClient.invalidateQueries({ queryKey: ['post', postId] });
    },
  });

  return (
    <button onClick={() => mutation.mutate()}>
      Like
    </button>
  );
}

import { create } from 'zustand';
import { devtools, persist } from 'zustand/middleware';

// Simple store - no providers needed!
interface BearState {
  bears: number;
  increase: (by: number) => void;
  decrease: () => void;
}

const useBearStore = create<BearState>()(
  devtools(
    persist(
      (set) => ({
        bears: 0,
        increase: (by) => set((state) => ({ bears: state.bears + by })),
        decrease: () => set((state) => ({ bears: state.bears - 1 })),
      }),
      { name: 'bear-storage' } // Persist to localStorage
    ),
    { name: 'BearStore' } // DevTools name
  )
);

// Use in any component - no provider needed!
function BearCounter() {
  const bears = useBearStore((state) => state.bears);
  return <h1>{bears} bears around here...</h1>;
}

function Controls() {
  const increase = useBearStore((state) => state.increase);
  return <button onClick={() => increase(1)}>Add bear</button>;
}

// Advanced: Complex store with nested state
interface AppState {
  user: {
    name: string;
    email: string;
  } | null;
  theme: 'light' | 'dark';
  sidebar: {
    isOpen: boolean;
    width: number;
  };
  setUser: (user: AppState['user']) => void;
  setTheme: (theme: 'light' | 'dark') => void;
  toggleSidebar: () => void;
  setSidebarWidth: (width: number) => void;
}

const useAppStore = create<AppState>()((set) => ({
  user: null,
  theme: 'light',
  sidebar: {
    isOpen: true,
    width: 250,
  },
  setUser: (user) => set({ user }),
  setTheme: (theme) => set({ theme }),
  toggleSidebar: () => set((state) => ({
    sidebar: { ...state.sidebar, isOpen: !state.sidebar.isOpen }
  })),
  setSidebarWidth: (width) => set((state) => ({
    sidebar: { ...state.sidebar, width }
  })),
}));

// Selective subscriptions - only re-render when specific part changes
function SidebarToggle() {
  // Only re-renders when sidebar.isOpen changes
  const isOpen = useAppStore((state) => state.sidebar.isOpen);
  const toggleSidebar = useAppStore((state) => state.toggleSidebar);
  
  return (
    <button onClick={toggleSidebar}>
      {isOpen ? 'Close' : 'Open'} Sidebar
    </button>
  );
}

function ThemeSwitcher() {
  // Only re-renders when theme changes
  const theme = useAppStore((state) => state.theme);
  const setTheme = useAppStore((state) => state.setTheme);
  
  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      Current theme: {theme}
    </button>
  );
}

// Combining with Immer for complex updates
import { produce } from 'immer';

const useComplexStore = create<{ items: Array<{ id: number; count: number }> }>()(
  (set) => ({
    items: [],
    addItem: (id: number) => set(produce((draft) => {
      draft.items.push({ id, count: 0 });
    })),
    incrementItem: (id: number) => set(produce((draft) => {
      const item = draft.items.find(i => i.id === id);
      if (item) item.count++;
    })),
  })
);

import { useQueryState, parseAsInteger, parseAsString } from 'nuqs';

// Simple string query param
function SearchPage() {
  const [search, setSearch] = useQueryState('q', parseAsString);

  return (
    <div>
      <input
        value={search || ''}
        onChange={(e) => setSearch(e.target.value || null)}
        placeholder="Search..."
      />
    </div>
  );
}

// Integer with default value
function PaginatedList() {
  const [page, setPage] = useQueryState('page', parseAsInteger.withDefault(1));

  return (
    <div>
      <button onClick={() => setPage(page - 1)} disabled={page === 1}>
        Previous
      </button>
      <span>Page {page}</span>
      <button onClick={() => setPage(page + 1)}>Next</button>
    </div>
  );
}

// Multiple query params
function FilterableTable() {
  const [search, setSearch] = useQueryState('search', parseAsString);
  const [sortBy, setSortBy] = useQueryState('sort', parseAsString.withDefault('name'));
  const [page, setPage] = useQueryState('page', parseAsInteger.withDefault(1));

  return (
    <div>
      <input
        value={search || ''}
        onChange={(e) => setSearch(e.target.value || null)}
        placeholder="Search..."
      />
      <select value={sortBy} onChange={(e) => setSortBy(e.target.value)}>
        <option value="name">Name</option>
        <option value="date">Date</option>
        <option value="price">Price</option>
      </select>
      {/* URL automatically updates: /table?search=test&sort=price&page=2 */}
    </div>
  );
}

// Custom parser for complex types
import { parseAsJson } from 'nuqs';

function ComplexState() {
  const [filters, setFilters] = useQueryState(
    'filters',
    parseAsJson<{ category: string; tags: string[] }>()
  );

  const updateFilters = (newFilters: { category: string; tags: string[] }) => {
    setFilters(newFilters);
  };

  return (
    <div>
      {/* Filters automatically synced with URL */}
    </div>
  );
}