The Evolution of State Management in JavaScript

Managing state in JavaScript applications has evolved significantly over the years. As applications grew in complexity, so did the challenges of maintaining a clean and efficient state management system. This article explores the historical journey, current practices, and the future of state management in JavaScript, highlighting observables, signals, and everything in between.

1. The Early Days: Global Variables and DOM Manipulation

In the beginning, state management was rudimentary. Developers relied on global variables and direct DOM manipulation to store and update application states. While this worked for simple pages, it quickly became unmanageable as apps scaled. Issues included:

• State Synchronization: Ensuring consistent data across components was a nightmare.
• Tight Coupling: Direct DOM manipulation intertwined state and UI logic.

Example:

// Global state
let counter = 0;

// Update DOM
function updateCounter() {
  document.getElementById('counter').innerText = counter;
}
document.getElementById('increment').addEventListener('click', () => {
  counter++;
  updateCounter();
});

Though functional, this approach lacked scalability and maintainability.

2. The Era of Two-Way Data Binding

Frameworks like AngularJS introduced two-way data binding, where changes in the UI automatically updated the model and vice versa. This reduced boilerplate but introduced challenges like unexpected updates and debugging complexities.

Pros:

• Simplified UI updates.
• Reduced developer effort for syncing state and view.

Cons:

• Hard-to-trace bugs due to implicit bindings.
• Performance issues with large-scale apps.

Example:

<div ng-app="">
  <input type="text" ng-model="name">
  <p>Hello, {{name}}</p>
</div>

3. The Rise of Unidirectional Data Flow

React revolutionized state management with its unidirectional data flow and the introduction of tools like Redux. Here, state changes were explicit, predictable, and traceable.

Key Concepts:

• Store: Centralized state container.
• Actions: Describe changes.
• Reducers: Define how actions transform state.

Example with Redux:

const initialState = { counter: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, counter: state.counter + 1 };
    default:
      return state;
  }
}

While Redux offered clarity and structure, boilerplate code was often a pain point.

4. Observables and Reactive Programming

RxJS popularized reactive programming in JavaScript. Observables made it possible to model asynchronous streams of data elegantly.

Use Cases:

• Handling real-time data (e.g., WebSockets).
• Complex event handling with operators like merge, filter, and map.

Example:

import { fromEvent } from 'rxjs';
import { map } from 'rxjs/operators';

const clicks = fromEvent(document, 'click');
const positions = clicks.pipe(map(event => event.clientX));
positions.subscribe(x => console.log(x));

Reactive patterns are powerful but come with a steep learning curve.

5. Signals: The Future of State Management?

Modern frameworks like Solid.js and Angular have introduced signals, offering a more efficient way to track and react to state changes.

What Are Signals?
Signals are primitives representing reactive values.
They allow for fine-grained reactivity, only updating specific parts of the DOM when necessary.

Example with Solid.js:

import { createSignal } from "solid-js";

const [count, setCount] = createSignal(0);

function increment() {
  setCount(count() + 1);
}

Why Signals Matter:

• Performance: Avoid unnecessary re-renders.
• Scalability: Better suited for complex apps with heavy interactions.

6. Comparing State Management Approaches

Approach	Advantages	Disadvantages	Use Case
Global Variables	Simple to implement	Hard to manage in large apps	Small, single-page apps
Two-Way Data Binding	Intuitive and automatic syncing	Debugging and performance issues	Simple CRUD apps
Redux (Unidirectional)	Predictable and scalable	Boilerplate-heavy	Large-scale applications
Observables	Elegant async handling	Steep learning curve	Real-time data streams, animations
Signals	Fine-grained reactivity	Limited framework support	Performance-critical modern apps

7. Tips and Tricks for Efficient State Management

1. Choose the Right Tool: Don’t over-engineer. A small app doesn’t need Redux.
2. Immutable State: Always treat state as immutable to avoid side effects.
3. Leverage Reactivity: Use tools like Signals for apps requiring granular updates.
4. Debugging: Invest time in learning tools like Redux DevTools or RxJS Marble Diagrams.

8. Where Are We Heading?

The evolution of state management is far from over. As web applications become more complex, we might see:

• AI-Driven State Management: Automating state updates based on patterns.
• WebAssembly Integration: Offloading state-heavy computations for better performance.
• Declarative State Models: Higher abstraction layers reducing boilerplate further.

Further Reading

• State Management in React
• Introduction to RxJS
• Signals in Solid.js
• Redux Documentation

---

My website: https://shafayet.zya.me

---

Color blind people are gonna have a hay day😭😭😭

Comments

[Peter Vivo]

React developers mainly forget the power of useReducer which is pair of useState. That is give to ability: work redux style without redux as dependency. Very handy if 2 or max 3 useState is not enough. When you would like to create centralized state handling in app.
Bonus this centralized state handling don't necessary global state, instead just centralized to one parent component.

But of course the standard: actions, reducer as pure funtion with immutable state element is give near same logic and same weakness as redux have. The full true I am not create a react app with redux a long years ago, instead useReducer, even with reduxSaga - which is really great async business state handling library with generators - this is advantage or disadvantage because really few JS developer using generator function, instead async function can be handle for non linear programming, but redux-saga is really good in that field, just bit outdated.

To final polish useReduce to use in a typesafe mode, I was created a two npm library, each of these try to give extended the useReducer with a type for state and actions.

these library is:
(react-state-factory)npmjs.com/package/react-state-factory[npmjs.com/package/jsdoc-duck]

Both of them works near same way, react-state-factory written in TS and also work with redux-saga. So that is bit booring and outdated.

The jsduck-dock is written in JSDoc/JS so that also can use not only JS but TS project also, in distance of importing don't see the differnce to use in JS (JSDoc of course) or TS. That library can accept JSDoc or TS declared user types well.

I saw so many times developers don't really familiar with state handling, and that cause so much problem. For example at react the useEffect give a power to controll the side effects, but useEffect technically controll by Component lifecycle, so at the end the view element controll when we using some business logic, which way is moving us from a greater level of business logic.

If instead of lot of distributed useState/useEffect we are using a single useReducer with a group actions, then we are able to handle these business logic in more centralized way.

[Shafayet Hossain]

Thanks, Peter, for such a detailed and thoughtful comment! You've covered some amazing points about useReducer and its potential, especially how it simplifies centralized state handling without Redux. Your insights into the advantages of redux-saga and the libraries you've created for type safe state handling are impressive. It's clear you’ve put a lot of thought into this area, and I’m sure others will find value in exploring these ideas further. Really appreciate you taking the time to share this! 😊🖤