Software Engineering

A Guide to State Management

As React apps grow, managing shared and app-wide state can become challenging. Dedicated state management libraries help tackle these complexities.

Let’s compare popular options:


Redux uses a centralized store for state:

// Store with root reducer
const store = createStore(rootReducer);

// Dispatch actions  

// Selectors
const todos = useSelector(state => state.todos);

Redux enforces unidirectional data flow inspired by functional programming.


MobX uses observable variables that update reactively:

// Observable store
const store = observable({
  todos: []

// Computed values derived from store 
const completedTodos = computed(() => {
  return store.todos.filter(todo => todo.complete);

MobX automatically tracks dependencies and re-renders on changes.


Recoil introduces shared state atoms:

// Atom
const textState = atom({
  key: 'textState',
  default: '',

// Component
function TextInput() {
  const [text, setText] = useRecoilState(textState);
  // ...

Atoms provide a minimal interface for shared state.


  • Redux – Centralized immutable stores
  • MobX – Reactive observable variables
  • Recoil – Shared state atoms

Each library brings unique tradeoffs. Consider app needs to choose the right state tool.