State Management for React

When to use Global state manager?

1. Multiple Components Need the Same State

• For example, user authentication info (userId, token, etc.), theme settings, or language preferences.
• You don’t want to keep drilling props down through multiple layers.

2. State Needs to Persist Across Routes

• For example, a shopping cart that’s accessible from multiple pages, or filters on a dashboard.

Avoid Global State When:

1. The state is local to a component or small part of the tree

• Local useState or useReducer is usually enough and better for encapsulation and simplicity.

2. You only need props drilling one or two levels

• Avoid overengineering. Sometimes passing props is totally fine.

3. You’re just doing UI state (e.g., modals, tabs)

• Local state or something like a UI store (if really needed) is better.

Redux

Redux is a state management library that allows accessing global state. This means that state can be accessed by any component, regardless of where it is in the tree.

Key Concepts:

• Centralized store
• Immutable state
• Pure reducer functions
• Actions and dispatching
• Middleware (like thunk/saga) for async logic

Example use cases:

• Enterprise applications
• Complex data flows (e.g., financial dashboards, apps with tons of forms and user roles)
• Apps with optimistic updates or time-travel debugging

3 main concepts of Redux: Store, Actions and Reducers

Store:

A store is just a state that may be defined in any way and contain any content. Stores are typically made up of many slices, each with different responsibilities for a specific domain in the application.

Action:

Actions represent what you want Redux to perform with the state. The payload is optional and can be whatever data that you wish to deliver to Redux in your action so that it can do its function. You can think of an action as an event that describes something that happened in the application.

Reducer:

Reducers are responsible for taking an action and then depending on the type of the action will actually and make the update in the Redux store. Use the type of the action to know what updates to do and optionally they will use the payload to do those specific updates to the Redux store.

Reducer will never directly make an update to the Redux store. It will immutable data. It means that it will never allowe to directly mutate the state Reducer will take the state and it will make a copy of the state, then it will make changes to that copy of the state and after that will completely replace the state as a whole with the copy that has the changes applied. You can think of a reducer as an event listener which handles events based on the received action (event) type.

Dispatch:

The Redux store has a method called dispatch. The only way to update the state is to call store.dispatch() and pass in an action object.

Selectors:

Selectors are functions that know how to extract specific pieces of information from a store state value. As an application grows bigger, this can help avoid repeating logic as different parts of the app need to read the same data

Redux toolkit

Example: Vite + React

//Page.tsx
"use client";

import { TimerButton } from "@/components/TimerButton";
import { TimerView } from "@/components/TimerView";
import { store } from "../lib/store";
import { Provider } from "react-redux";

export default function Home() {
  return (
    <Provider store={store}>
      <TimerView />
      <TimerButton />
    </Provider>
  );
}

//lib/store.tsx
import { configureStore } from "@reduxjs/toolkit";
import timerReducer from "./features/timer/timerSlice";

export const store = configureStore({
  reducer: { timer: timerReducer },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

//lib/hooks.ts
import { useDispatch, useSelector } from "react-redux";
import type { RootState, AppDispatch } from "./store";

export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
export const useAppSelector = useSelector.withTypes<RootState>();

//lib/features/timer/timerSlice.ts
interface TimerState {
  secondsPassed: number;
}

const initialState: TimerState = {
  secondsPassed: 0,
};

const timerSlice = createSlice({
  name: "timer",
  initialState,
  reducers: {
    increment: (state) => {
      state.secondsPassed++;
    },
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.secondsPassed += action.payload;
    },
    reset: (state) => {
      state.secondsPassed = 0;
    },
  },
  extraReducers: (builder) => {
    builder.addCase(
      decrementByAmountAsync.fulfilled,
      (state, action: PayloadAction<number>) => {
        state.secondsPassed -= action.payload;
      }
    );
  },
});

export const decrementByAmountAsync = createAsyncThunk(
  "timer/decrementByAmountAsync",
  async (seconds: number) => {
    await new Promise((resolve) => setTimeout(resolve, 1000));
    return seconds;
  }
);

export default timerSlice.reducer;

export const { increment, incrementByAmount, reset } = timerSlice.actions;

//TimerButton.tsx
export const TimerButton = () => {
  const dispatch = useAppDispatch();
  return (
    <div style={{ display: "flex", gap: "1rem" }}>
      <button onClick={() => dispatch(reset())}>Reset</button>
      <button onClick={() => dispatch(increment())}>Increase</button>
      <button onClick={() => dispatch(incrementByAmount(5))}>
        Increase by 5
      </button>
      <button onClick={() => dispatch(decrementByAmountAsync(10))}>
        Decrement by 10
      </button>
    </div>
  );
};

//TimerView.tsx
export const TimerView = () => {
  const secondsPassed = useAppSelector((state) => state.timer.secondsPassed);
  return <p>Seconds passed: {secondsPassed}</p>;
};

Example: Nextjs

//TODO:

Zustand

Key Concepts:

• Uses hooks to access state
• No context/provider needed
• Faster then context - it allows you to specificly select what state you want to subscribe to
• State merging by default
• Extendable by default - you can add custom middleware to give more functionality
• Works well with React’s modern features
• Directly integrates into components

Diferent between context and zustand

If you have context with valueA and valueB and you want to access valueA in a component, you will be subscribed to all states in that context. This is a problem, because if you change valueB, your component will also re-render.

With zustand store, we can have multiple values in the store, but another component will subscribe only to the value that wants to subscribe. which means that it will re-render only if valueA changes.

Are re-renders bad?

No, if you have complex react logic, witch shoud be in useMemo or useEffect. If value doesnt change that often or is not that complext then it not problem for react to handle.

Renders dont change the DOM - all computation are on shadow DOM and only if there are diference between shadow DOM and actually DOM, there will be commands to change the DOM. With is very expensive part

When to use Zustand

1. You’re building a small to medium app, or starting a new project and want something quick and modern.
2. You like React hooks and don’t want to deal with context or reducers.
3. You want state logic co-located with components, not in global files.
4. You care about performance and simplicity (Zustand updates are fine-grained and efficient).
5. You want a “set it and forget it” store with zero boilerplate.

Example use cases:

• SPAs and mobile apps (React Native)
• Games or animation-heavy apps
• MVPs, prototypes, or internal dashboards
• Component libraries or micro-frontends

Example: Vite + React

// Page.tsx
"use client";

import { TimerButton } from "@/components/TimerButton";
import { TimerView } from "@/components/TimerView";
import { useSecoundsPassed } from "@/store/TimerStore";
import { logTimer, setTimerToOne } from "@/utils/timer";
import { useEffect } from "react";

export default function Home() {
  // it will re-render this component only when secondsPassed changes
  const secondsPassed = useSecoundsPassed((state) => state.secondsPassed);

  useEffect(() => {
    setTimerToOne();
    logTimer();
  }, []);

  return (
    <>
      <TimerView secondsPassed={secondsPassed} />
      <TimerButton />
    </>
  );
}

//TimerStore.tsx
import { create } from "zustand";

export type TimerState = {
  secondsPassed: number;
  increase: () => void;
  reset: () => void;
  decrementAsync: () => Promise<void>;
};

export const useSecoundsPassed = create<TimerState>((set) => ({
  secondsPassed: 0,
  increase: () => set((state) => ({ secondsPassed: state.secondsPassed + 1 })),
  reset: () => set({ secondsPassed: 0 }),
  decrementAsync: async () => {
    await new Promise((resolve) => setTimeout(resolve, 1000));
    set((state) => ({ secondsPassed: state.secondsPassed - 1 }));
  },
}));

// timer.ts
import { useSecoundsPassed } from "@/store/TimerStore";

export const logTimer = () => {
  const timer = useSecoundsPassed.getState().secondsPassed;
  console.log("Timer: ", timer);
};

export const setTimerToOne = () => {
  useSecoundsPassed.setState({ secondsPassed: 1 });
};

//TimerButton.tsx
export const TimerButton = () => {
  const reset = useSecoundsPassed((state) => state.reset);
  const increment = useSecoundsPassed((state) => state.increase);
  const decrementAsync = useSecoundsPassed((state) => state.decrementAsync);
  return (
    <div style={{ display: "flex", gap: "1rem" }}>
      <button onClick={reset}>Reset</button>
      <button onClick={increment}>Increase</button>
      <button onClick={decrementAsync}>Decrement</button>
    </div>
  );
};

//TimerView.tsx
export const TimerView = ({
  secondsPassed,
}: {
  secondsPassed: TimerState["secondsPassed"];
}) => <p>Seconds passed: {secondsPassed}</p>;

Example: Nextjs

//TODO:

More:

https://youtu.be/fZPgBnL2x-Q?si=3lgPRdaJEHemPnCH&t=802

MobX

The main responsibility of stores is to move logic and state out of your components into a standalone testable unit that can be used in both frontend and backend JavaScript.

Key Concepts:

• Observable state
• Reactions and computed values
• state is muttable
• OOP-friendly (classes)

A single domain store should be responsible for a single concept in your application. A single store is often organized as a tree structure with multiple domain objects inside.

For example: one domain store for your products, and one for your orders and orderlines

• observable - Defines a trackable field that stores the state.
• computed - Computed values can be used to derive information from other observables
• reaction - Automatically running side effects whenever something relevant changes
• action - An action is any piece of code that modifies the state

observer

Observer is HOC that you can wrap around a React component. It will automatically subscribe to any observables that are used during rendering. As a result, components will automatically re-render when relevant observables change. It also makes sure that components don't re-render when there are no relevant changes For observer to work, it doesn't matter how the observables arrive in the component, only that they are read.

observer automatically applies memo, so observer components never need to be wrapped in memo.

Always read observables inside observer components

If observer is used in server side rendering context; make sure to call enableStaticRendering(true), so that observer won't subscribe to any observables used, and no GC problems are introduced

When to use MobX

1. You prefer an OOP/reactive programming style and want to think less about immutability.
2. You want a lightweight, magic-like reactivity system that just "works" with minimal boilerplate.
3. Your app's state is deeply nested or complex, and you don't want to write reducers.
4. You’re building a medium to large app, but want less ceremony than Redux.
5. You or your team are comfortable with the idea of observable state and automatic reactions.

Example use cases:

• Apps with heavy UI interactions (like forms, editors)
• Real-time collaboration tools
• Internal tools where speed of development matters more than formal structure

Example: Vite + React

// Page.tsx
"use client";

import React from "react";
import { TimerButton } from "@/components/TimerButton";
import { initialState, StoreProvider } from "@/components/TimerProvider";
import { TimerView } from "@/components/TimerView";

export default function Home() {
  const [store] = React.useState(() => initialState);
  return (
    <StoreProvider>
      <TimerView timer={store} />
      <TimerButton />
    </StoreProvider>
  );
}

//TimerProvider.tsx
export const initialState = observable({
  secondsPassed: 0,
  increase() {
    this.secondsPassed += 1;
  },
  reset() {
    this.secondsPassed = 0;
  },
  async decrementByAmountAsync(secounds: number) {
    await new Promise((resolve) => setTimeout(resolve, 1000));
    runInAction(() => {
      //https://mobx.js.org/actions.html#asynchronous-actions
      //every step (tick) that updates observables in an asynchronous process should be marked as action
      this.secondsPassed -= secounds;
    });
  },
});

export type CreateTimer = typeof initialState;

const StoreContext = React.createContext<CreateTimer | undefined>(undefined);

export function StoreProvider({ children }: { children: ReactNode }) {
  const [store] = React.useState(() => initialState);

  return (
    <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
  );
}

export function useSecoundsPassed() {
  const context = React.useContext(StoreContext);
  if (context === undefined) {
    throw new Error("useSecoundsPassed must be used within StoreProvider");
  }

  return context;
}

//TimerView.tsx
export const TimerView = observer(({ timer }: { timer: CreateTimer }) => (
  <p>Seconds passed: {timer.secondsPassed}</p>
));

//TimerButton.tsx
export const TimerButton = observer(() => {
  const timer = useSecoundsPassed();
  return (
    <div style={{ display: "flex", gap: "1rem" }}>
      <button onClick={() => timer.reset()}>Reset</button>
      <button onClick={() => timer.increase()}>Increase</button>
      <button onClick={() => timer.decrementByAmountAsync(5)}>
        Decrement by 5
      </button>
    </div>
  );
});

Example: Nextjs

//TODO:

jotai

https://jotai.org/