State Management in React: Redux, Mobx, and Clean-State

React has evolved through many versions, with state management approaches like Redux (Flux) and Mobx (reactive). After Hooks introduced in v16.8, new possibilities arise.

In large projects, UI fragmentation leads to scattered state, increasing entropy. Centralized state is recommended.

1. Redux stores state in a single store, updates via dispatch and reducers. However, it introduces extra libraries (react-redux, redux-thunk, redux-saga) increasing bundle size and learning cost, and can cause unnecessary re-renders because dispatch triggers top‑level setState.

// Provider injection
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

const rootElement = document.getElementById('root');
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
);

// connect usage
import { connect } from 'react-redux';
import { increment, decrement, reset } from './actionCreators';

const mapStateToProps = (state) => ({
  counter: state.counter,
});

const mapDispatchToProps = { increment, decrement, reset };
export default connect(mapStateToProps, mapDispatchToProps)(Counter);

2. Mobx provides fine‑grained updates but relies on class‑based observable state and lacks centralization, making it less suitable for modern functional React.

// Observable state with Mobx
import { decorate, observable } from "mobx";

class TodoList {
  @observable todos = [];
  @computed get unfinishedTodoCount() {
    return this.todos.filter(todo => !todo.finished).length;
  }
}

// Observer component
import React, { Component } from 'react';
import { observer } from 'mobx-react';

@observer
class TodoListView extends Component {
  render() {
    return (
      <div>
        <ul>
          {this.props.todoList.todos.map(todo => (
            <TodoView todo={todo} key={todo.id} />
          ))}
        </ul>
        Tasks left: {this.props.todoList.unfinishedTodoCount}
      </div>
    );
  }
}

3. Clean‑State is a lightweight state‑management library built on top of React Hooks. It avoids Provider injection and variable lifting, enabling module‑level precise updates.

Key concepts:

Modules are defined by a state object, reducers, and effects.

Modules are registered via a bootstrap function that returns useModule and dispatch.

Modules can be mixed in to share common reducers.

Debugging is supported through a Redux‑devtool plugin.

// modules/user.js
const state = { name: 'test' };
const user = {
  state,
  reducers: {
    setName({ payload, state }) {
      return { ...state, ...payload };
    },
  },
  effects: {
    async fetchNameAndSet({ dispatch }) {
      const name = await Promise.resolve('fetch_name');
      dispatch.user.setName({ name });
    },
  },
};
export default user;

// modules/index.js
import user from './user';
import bootstrap from 'clean-state';
const modules = { user };
export const { useModule, dispatch } = bootstrap(modules);

Usage example:

// page.js
import { useCallback } from 'react';
import { useModule, dispatch } from './modules';

function App() {
  const { user } = useModule('user');
  const onChange = useCallback(e => {
    const { target } = e;
    dispatch.user.setName({ name: target.value });
  }, []);
  const onClick = useCallback(() => {
    dispatch.user.fetchNameAndSet();
  }, []);
  return (
    <div className="App">
      <div>name: {user.name}</div>
      <div>Modify name: <input onChange={onChange} /></div>
      <button onClick={onClick}>Get name</button>
    </div>
  );
}
export default App;

Clean‑State promotes a minimalist approach, making state management easier for both large B‑side projects and consumer‑facing C‑side applications.