React: How to handle state management in large React apps?

1import { create } from "zustand";
2import { persist } from "zustand/middleware";
3
4interface TodoStore {
5  todos: Todo[];
6  filter: "all" | "active" | "completed";
7  addTodo: (text: string) => void;
8  toggleTodo: (id: string) => void;
9  setFilter: (filter: TodoStore["filter"]) => void;
10}
11
12const useTodoStore = create<TodoStore>()(
13  persist(
14    (set) => ({
15      todos: [],
16      filter: "all",
17      addTodo: (text) => set((state) => ({
18        todos: [...state.todos, { id: crypto.randomUUID(), text, done: false }],
19      })),
20      toggleTodo: (id) => set((state) => ({
21        todos: state.todos.map(t =>
22          t.id === id ? { ...t, done: !t.done } : t
23        ),
24      })),
25      setFilter: (filter) => set({ filter }),
26    }),
27    { name: "todo-storage" }
28  )
29);
30
31// Usage — components only re-render when selected state changes
32function TodoList() {
33  const todos = useTodoStore(state => state.todos);
34  const filter = useTodoStore(state => state.filter);
35  const toggleTodo = useTodoStore(state => state.toggleTodo);
36
37  const filtered = todos.filter(t => {
38    if (filter === "active") return !t.done;
39    if (filter === "completed") return t.done;
40    return true;
41  });
42
43  return (
44    <ul>
45      {filtered.map(t => (
46        <li key={t.id} onClick={() => toggleTodo(t.id)}>
47          {t.text}
48        </li>
49      ))}
50    </ul>
51  );
52}

1import { createSlice, configureStore } from "@reduxjs/toolkit";
2import { Provider, useSelector, useDispatch } from "react-redux";
3
4const todosSlice = createSlice({
5  name: "todos",
6  initialState: [] as Todo[],
7  reducers: {
8    addTodo: (state, action) => {
9      state.push({ id: crypto.randomUUID(), text: action.payload, done: false });
10    },
11    toggleTodo: (state, action) => {
12      const todo = state.find(t => t.id === action.payload);
13      if (todo) todo.done = !todo.done;
14    },
15  },
16});
17
18const store = configureStore({ reducer: { todos: todosSlice.reducer } });
19
20// Usage
21function TodoApp() {
22  const todos = useSelector(state => state.todos);
23  const dispatch = useDispatch();
24
25  return (
26    <div>
27      {todos.map(t => (
28        <div key={t.id} onClick={() => dispatch(todosSlice.actions.toggleTodo(t.id))}>
29          {t.text}
30        </div>
31      ))}
32    </div>
33  );
34}

1import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
2
3function Todos() {
4  const queryClient = useQueryClient();
5
6  const { data: todos, isLoading } = useQuery({
7    queryKey: ["todos"],
8    queryFn: () => fetch("/api/todos").then(r => r.json()),
9  });
10
11  const addTodo = useMutation({
12    mutationFn: (text: string) =>
13      fetch("/api/todos", { method: "POST", body: JSON.stringify({ text }) }),
14    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["todos"] }),
15  });
16
17  if (isLoading) return <p>Loading...</p>;
18  return (
19    <ul>
20      {todos.map(t => <li key={t.id}>{t.text}</li>)}
21      <button onClick={() => addTodo.mutate("New todo")}>Add</button>
22    </ul>
23  );
24}